import {
    IconColumns,
    IconFileBarcode,
    IconLayoutKanban,
    IconUsers,
} from "@tabler/icons-react";
import { Box, Flex } from "@mantine/core";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
import Logo from "@/components/ui/Logo/Logo";
import NavbarLinks from "./NavbarLinks";
import styles from "./Navbar.module.css";

const linksData = [
    {
        icon: IconLayoutKanban,
        label: "Сделки",
        href: "/deals",
    },
    {
        icon: IconUsers,
        label: "Клиенты",
        href: "/clients",
    },
    {
        icon: IconColumns,
        label: "Услуги",
        href: "/services",
    },
    {
        icon: IconFileBarcode,
        label: "Шаблоны штрихкодов",
        href: "/barcode-templates",
    },
];

const Navbar = () => {
    return (
        <Box className={styles.background}>
            <PageBlock
                style={{
                    marginBlock: "var(--mantine-spacing-md)",
                    marginLeft: "var(--mantine-spacing-md)",
                }}
                fullHeight>
                <Flex
                    direction={"column"}
                    h={"100%"}>
                    <Logo title={"Fulfillment & Delivery"} />
                    <Flex
                        direction={"column"}
                        justify={"space-between"}
                        h={"100%"}>
                        <NavbarLinks linksData={linksData} />
                        <ColorSchemeToggle />
                    </Flex>
                </Flex>
            </PageBlock>
        </Box>
    );
};

export default Navbar;
