import { twMerge } from "tailwind-merge";
import { HeaderLinks } from "./(data)/links";
import HeaderLink from "./(partials)/HeaderLink";
import Row from "@/components/lib/layout/Row";
import Logo from "@/components/general/Logo";
import { Menu } from "lucide-react";
import Button from "@/components/lib/layout/Button";
import React from "react";

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

export default function Header({ menuOpen, setMenuOpen }: Props) {
    return (
        <header
            className={twMerge(
                "h-[var(--header-height)] border-0 border-b border-white/10",
                "w-full flex flex-row items-center px-6 sticky top-0",
                "bg-[var(--bg-color)] z-10"
            )}
        >
            <Row className="gap-6 ml-auto hidden md:flex">
                {HeaderLinks.map((link, index) => {
                    return <HeaderLink key={index} link={link} />;
                })}
            </Row>
            <Row className="flex md:hidden w-full justify-between">
                <Logo size={25} />
                <Button variant="ghost" onClick={() => setMenuOpen(!menuOpen)}>
                    <Menu />
                </Button>
            </Row>
        </header>
    );
}