import React, { useState } from "react";
import { FaFacebookF } from "react-icons/fa";

type NavItem = {
    label: string;
    href: string;
};

type SiteHeaderProps = {
    navigationItems: NavItem[];
    theme?: "dark" | "light";
    className?: string;
    facebookHref?: string;
};

export const SiteHeader = ({
    navigationItems,
    theme = "light",
    className = "",
    facebookHref = "/facebook",
}: SiteHeaderProps): JSX.Element => {
    const [menuOpen, setMenuOpen] = useState(false);
    const isDark = theme === "dark";
    const textClass = isDark ? "text-white" : "text-black";
    const borderClass = isDark ? "border-white/40" : "border-black/20";
    const lineClass = isDark ? "bg-white" : "bg-black";

    return (
        <>
            {menuOpen && (
                <div
                    id="mobile-menu"
                    className="fixed inset-0 z-50 flex flex-col bg-[#e2e2e2] px-6 pt-6 sm:hidden"
                    role="dialog"
                    aria-modal="true"
                >
                    <div className="flex items-center justify-between">
                        <a href="/" aria-label="Highland Group RDA home">
                            <img
                                className="w-[140px] h-[75px]"
                                alt="Rdalogo"
                                src="/figmaAssets/rdalogo-1.svg"
                            />
                        </a>
                        <button
                            className="rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
                            type="button"
                            onClick={() => setMenuOpen(false)}
                        >
                            Close
                        </button>
                    </div>
                    <nav className="mt-10 [font-family:'Public_Sans',Helvetica] font-bold text-black text-2xl tracking-[0] leading-[normal]">
                        <ul className="flex flex-col gap-6">
                            {navigationItems.map((item) => (
                                <li key={item.label}>
                                    <a
                                        className="block border-b border-black/10 pb-4"
                                        href={item.href}
                                        onClick={() => setMenuOpen(false)}
                                    >
                                        {item.label}
                                    </a>
                                </li>
                            ))}
                            <li>
                                <a
                                    className="flex items-center gap-3 border-b border-black/10 pb-4"
                                    href={facebookHref}
                                    onClick={() => setMenuOpen(false)}
                                >
                                    <span className="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/20 text-black">
                                        <FaFacebookF className="h-4 w-4" />
                                    </span>
                                    Facebook
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            )}
            <header className={`relative w-full ${className}`.trim()}>
                <div className="flex flex-row items-start justify-between gap-3 pt-3 sm:pt-4 sm:h-[108px]">
                    <a href="/" aria-label="Highland Group RDA home">
                        <img
                            className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
                            alt="Rdalogo"
                            src="/figmaAssets/rdalogo-1.svg"
                        />
                    </a>
                    <div className="flex flex-col gap-3 items-end ml-auto text-right">
                        <button
                            className={`inline-flex items-center gap-3 rounded-full border px-4 py-2 text-sm font-semibold uppercase tracking-wide sm:hidden ${borderClass} ${textClass}`}
                            type="button"
                            onClick={() => setMenuOpen(true)}
                            aria-haspopup="dialog"
                            aria-expanded={menuOpen}
                            aria-controls="mobile-menu"
                        >
                            <span className="flex flex-col gap-1">
                                <span
                                    className={`inline-block h-0.5 w-5 ${lineClass}`}
                                />
                                <span
                                    className={`inline-block h-0.5 w-5 ${lineClass}`}
                                />
                                <span
                                    className={`inline-block h-0.5 w-5 ${lineClass}`}
                                />
                            </span>
                            Menu
                        </button>
                        <nav
                            className={`hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold ${textClass} text-lg sm:text-2xl tracking-[0] leading-[normal] sm:pt-1`}
                        >
                            <ul className="flex flex-wrap items-center justify-start gap-x-4 gap-y-2 sm:justify-end sm:gap-x-8 sm:ml-auto">
                                {navigationItems.map((item) => (
                                    <li key={item.label}>
                                        <a
                                            className="hover:underline"
                                            href={item.href}
                                        >
                                            {item.label}
                                        </a>
                                    </li>
                                ))}
                                <li className="hidden sm:block">
                                    <a
                                        className={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
                                        href={facebookHref}
                                        aria-label="Highland Group RDA on Facebook"
                                    >
                                        <FaFacebookF className="h-4 w-4" />
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        </>
    );
};
