import { useState } from "react";
import Aku from "../assets/images/aku.png";

interface PageItem {
    label: string;
    url: string;
}

interface HeaderTheme {
    theme: string;
    toggleTheme: () => void;
}

interface HeaderProps {
    theme: HeaderTheme;
}

export default function Header({ theme }: HeaderProps) {
    const { theme: currentTheme, toggleTheme } = theme;
    const [menuOpen, setMenuOpen] = useState(false);

    const pageItems: PageItem[] = [
        { label: "Stream", url: "/stream" },
        { label: "Portfolio", url: "/portfolio" },
        { label: "Contact", url: "/contact" },
    ];

    const goHome = () => {
        window.location.href = "/";
    };

    const closeMenu = () => {
        setMenuOpen(false);
    };

    return (
        <header className="bg-ctp-mantle flex flex-col md:flex-row justify-evenly items-start md:items-center px-4 md:px-12 py-4 md:py-6 gap-4 md:gap-6 border-b border-ctp-lavender-800">
            <div className="grid grid-cols-3 items-center w-full md:hidden gap-4">
                <img
                    className="size-16 cursor-pointer justify-self-start"
                    src={Aku}
                    alt="Home"
                    onClick={goHome}
                />

                <button
                    className="theme-ui-btn ui-btn:hover font-[NerdFontSymbols] justify-self-center"
                    aria-label="Toggle menu"
                    aria-expanded={menuOpen}
                    onClick={() => setMenuOpen(!menuOpen)}
                >
                    {menuOpen ? "\uf00d" : "\uf0c9"}
                </button>

                <button
                    className="theme-ui-btn ui-btn:hover text-lg font-[NerdFontSymbols] justify-self-end"
                    onClick={toggleTheme}
                >
                    {currentTheme === "macchiato" ? "" : ""}
                </button>
            </div>

            <div className="hidden md:block">
                <img
                    className="size-16 cursor-pointer"
                    src={Aku}
                    alt="Home"
                    onClick={goHome}
                />
            </div>

            <nav className="hidden md:flex flex-wrap gap-2 md:gap-3 items-end">
                {pageItems.map((page) => (
                    <a
                        key={page.label}
                        href={page.url}
                        className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
                    >
                        {page.label}
                    </a>
                ))}
            </nav>

            <div className="hidden md:block">
                <button
                    className="theme-ui-btn ui-btn:hover text-lg font-[NerdFontSymbols]"
                    onClick={toggleTheme}
                >
                    {currentTheme === "macchiato" ? "" : ""}
                </button>
            </div>

            <div
                className={`md:hidden w-full overflow-hidden transition-all duration-150 ease-in-out ${
                    menuOpen
                        ? "max-h-80 opacity-100 visible"
                        : "max-h-0 opacity-0 invisible"
                }`}
            >
                <nav className="flex flex-col gap-2 w-full max-w-sm mx-auto border-t border-ctp-lavender-800 pt-4">
                    {pageItems.map((item) => (
                        <a
                            key={item.label}
                            href={item.url}
                            className="ui-btn ui-btn:hover px-2 py-1 w-full"
                            onClick={closeMenu}
                        >
                            {item.label}
                        </a>
                    ))}
                </nav>
            </div>
        </header>
    );
}
