import { Link } from "@tanstack/react-router";
import byuLogo from "#/public/byuLogoWhiteSmall.svg";
import MobileMenu from '#/components/BYU-Header/Header-hamburgerMenu'


// ----------------------
// Type Definitions
// ----------------------
type HeaderProps = {
  title: string;
  subtitle?: string;
  breadcrumbs?: React.ReactNode;
  rightItems?: React.ReactNode[];
  navLinks?: React.ReactNode[];
};

// ----------------------
// Main Component
// ----------------------

const Header = ({
  title,
  subtitle,
  breadcrumbs,
  rightItems,
  navLinks,
}: HeaderProps) => {
  return (
    <div>
      {/* =========================================================
          HEADER TOP BAR
          - Navy background with BYU logo, title, breadcrumbs, and right-side items
          - Split into left (logo/title) and right (menu/actions)
          ========================================================= */}
      <div className="bg-byu-navy text-white">
        <div className="w-full px-4 sm:px-6 lg:px-6">
          <div className="flex items-stretch justify-between font-semibold py-3 border-b border-byu-mediumGrey">
            {/* =========================================================
                LEFT SIDE: Logo + Title + Breadcrumbs
                ========================================================= */}
            <div className="flex items-stretch space-x-6">
              {/* --- BYU Logo --- */}
              <div className="pr-6 border-r border-byu-mediumGrey flex items-center">
                <a
                  href="https://www.byu.edu"
                  className="flex items-center"
                  aria-label="BYU home"

                >
                  <img
                    src={byuLogo}
                    alt="BYU"
                    className="pl-2 h-5 w-auto"
                  />
                </a>
              </div>

              {/* --- Title, Subtitle, Breadcrumbs --- */}
              <div className="ml-1 flex flex-col justify-center">
                {/* Breadcrumbs: shown only on desktop */}
                <div className="hidden md:flex items-center space-x-3 text-md font-normal">
                  {breadcrumbs}
                </div>

                {/* Site Title (always visible) */}
                <Link to="/" className="text-2xl font-bold hover:underline">
                  {title}
                </Link>

                {/* Subtitle: optional, desktop only */}
                {subtitle && (
                  <h1 className="hidden md:flex text-lg font-medium">
                    {subtitle}
                  </h1>
                )}
              </div>
            </div>

            {/* =========================================================
                RIGHT SIDE: Menus and action items
                ========================================================= */}
            <div className="flex items-center text-end">
              {/* --- MOBILE MENU (hamburger) ---
                   - Visible on mobile only (<md)
                   - Uses client component (MobileMenu)
                   - Contains rightItems and navLinks
              */}
              <div className="flex items-center gap-3 md:hidden font-normal">
                <MobileMenu rightItems={rightItems} navLinks={navLinks} />
              </div>

              {/* --- DESKTOP RIGHT ITEMS ---
                   - Hidden on mobile
                   - Typically search, buttons, or profile links
              */}
              <div className="hidden md:flex items-center gap-3">
                {rightItems}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* =========================================================
          DESKTOP NAVIGATION BAR
          - Visible only on md+
          - White background, navy text
          - Contains navLinks passed in as props
          ========================================================= */}
      <nav className="hidden md:block bg-white text-byu-navy text-md font-medium border-b-2 border-gray-200">
        <div className="w-full px-4 sm:px-6 lg:px-6 flex flex-wrap gap-x-6 justify-start">
          {navLinks}
        </div>
      </nav>
    </div>
  )
}

export default Header