import { IconCircleDotted, IconLayoutKanban } 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";

const linksData = [
    {
        icon: IconLayoutKanban,
        label: "Сделки",
        href: "/deals",
    },
    {
        icon: IconCircleDotted,
        label: "Назад",
        href: "/oiiai",
    },
];

const Navbar = () => {
    return (
        <Box style={{ backgroundColor: "var(--color-light-gray-blue)" }}>
            <PageBlock
                style={{
                    marginBlock: "var(--mantine-spacing-md)",
                    marginLeft: "var(--mantine-spacing-md)",
                }}
                fullHeight>
                <Flex
                    direction={"column"}
                    h={"100%"}>
                    <Logo title={"Fulfillment & Delivery"} />
                    <Flex
                        mx={"xs"}
                        direction={"column"}
                        justify={"space-between"}
                        h={"100%"}>
                        <NavbarLinks linksData={linksData} />
                        <ColorSchemeToggle />
                    </Flex>
                </Flex>
            </PageBlock>
        </Box>
    );
};

export default Navbar;
