import { Tabs } from "@mantine/core";
import { t } from "@/config/i18n";
import { Outlet, useLocation, useNavigate } from "react-router";

export default function Dashboard() {
    const navigate = useNavigate();
    const location = useLocation();
    
    return (
        <Tabs 
            w={{base: "100%", md: "80%", lg: "60%"}}
            orientation={"horizontal"}
            value={location.pathname.split('/')[2]}
            defaultValue={"productors"}
            onChange={(value) => navigate(`/dashboard/${value}`)}
        >
            <Tabs.List>
                <Tabs.Tab value="productors">{t("productors", {capfirst: true})}</Tabs.Tab>
                <Tabs.Tab value="products">{t("products", {capfirst: true})}</Tabs.Tab>
                <Tabs.Tab value="forms">{t("forms", {capfirst: true})}</Tabs.Tab>
                <Tabs.Tab value="shipments">{t("shipments", {capfirst: true})}</Tabs.Tab>
                {/* <Tabs.Tab value="templates">{t("templates", {capfirst: true})}</Tabs.Tab> */}
                <Tabs.Tab value="users">{t("users", {capfirst: true})}</Tabs.Tab>
            </Tabs.List>
            <Outlet/>
        </Tabs>
    );
}