import { Box, Flex } from "@mantine/core";
import ProjectSelectContainer from "@/components/layout/Navbar/components/ProjectSelectContainer";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
import Logo from "@/components/ui/Logo/Logo";
import NavbarLinks from "./components/NavbarLinks";
import styles from "./Navbar.module.css";

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"} />
                    <ProjectSelectContainer />
                    <Flex
                        mt={"xs"}
                        direction={"column"}
                        justify={"space-between"}
                        h={"100%"}>
                        <NavbarLinks />
                        <ColorSchemeToggle />
                    </Flex>
                </Flex>
            </PageBlock>
        </Box>
    );
};

export default Navbar;
