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

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-background-dark z-10",
            )}
        >
            <Row className="gap-6 ml-auto hidden md:flex">
                <LinkList links={HeaderLinks} />
            </Row>
            <Row className="flex md:hidden w-full justify-between">
                <Logo size={25} />
                <Button
                    title="Mobile Menu"
                    variant="ghost"
                    onClick={() => setMenuOpen(!menuOpen)}
                >
                    <Menu />
                </Button>
            </Row>
        </header>
    );
}
