import Logo from "@/components/general/Logo";
import Stack from "@/components/lib/layout/Stack";
import { twMerge } from "tailwind-merge";
import { HeaderLinks, SocialLinks } from "../(data)/links";
import React from "react";
import Divider from "@/components/lib/layout/Divider";
import Button from "@/components/lib/layout/Button";
import { X } from "lucide-react";
import SocialLink from "../(partials)/SocialLink";
import Row from "@/components/lib/layout/Row";
import LinkList from "@/components/lib/elements/LinkList";

type Props = {
    menuOpen: boolean;
    setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
    return (
        <div
            className={twMerge(
                "fixed top-0 w-full h-full overflow-y-auto",
                "z-[100] p-10 bg-background dark:bg-background-dark",
                menuOpen ? "right-0" : "right-[100vw]"
            )}
        >
            <Button
                title="Close Mobile Menu"
                variant="ghost"
                className="absolute top-10 right-10"
                onClick={() => setMenuOpen(false)}
            >
                <X />
            </Button>
            <Stack className="w-full h-full">
                <Logo size={40} />
                <Divider dashed className="border-[2px] mt-4 mb-2" />
                <Stack className="w-full items-stretch">
                    <LinkList
                        links={HeaderLinks}
                        className="flex-col items-stretch"
                    />
                </Stack>
                <Divider dashed className="border-[2px] my-4" />
                <Row className="items-center w-full py-6 gap-10 mt-auto">
                    {SocialLinks.map((link, index) => {
                        return <SocialLink key={index} link={link} />;
                    })}
                </Row>
            </Stack>
        </div>
    );
}
