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 HeaderLink from "../(partials)/HeaderLink";
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";

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

export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
    return (
        <div
            className={twMerge(
                "fixed top-0 bg-[var(--bg-color)] w-full h-full overflow-y-auto",
                "z-[100] p-10",
                menuOpen ? "right-0" : "right-[100vw]"
            )}
        >
            <Button
                variant="ghost"
                className="absolute top-10 right-10"
                onClick={() => setMenuOpen(false)}
            >
                <X />
            </Button>
            <Stack className="w-full h-full">
                <Logo size={40} />
                <Divider />
                <Stack className="w-full items-stretch">
                    {HeaderLinks.map((link, index) => {
                        return (
                            <React.Fragment key={index}>
                                <HeaderLink key={index} link={link} />
                                {index < HeaderLinks.length - 1 && <Divider />}
                            </React.Fragment>
                        );
                    })}
                </Stack>
                <Divider />
                <Row className="items-center w-full py-6 mt-auto gap-10 mt-auto">
                    {SocialLinks.map((link, index) => {
                        return <SocialLink key={index} link={link} />;
                    })}
                </Row>
            </Stack>
        </div>
    );
}