import type { MouseEventHandler } from "react";

type Theme = "dark" | "light";

type SiteHeaderProps = {
  menuOpen: boolean;
  theme: Theme;
  onMenuToggle: () => void;
  onThemeToggle: () => void;
  onNavClick: MouseEventHandler<HTMLElement>;
};

export default function SiteHeader({ menuOpen, theme, onMenuToggle, onThemeToggle, onNavClick }: SiteHeaderProps) {
  return (
    <header className="site-header" aria-label="Primary navigation">
      <a className="brand" href="#top" aria-label="Bay Area Email Services home">
        <span className="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 40 32" role="img">
            <path d="M3 5.5h34v21H3z"></path>
            <path d="m4.5 7 15.5 11.5L35.5 7"></path>
            <path d="m4.5 25 11.2-9.2"></path>
            <path d="m35.5 25-11.2-9.2"></path>
          </svg>
        </span>
        <span>
          <strong>Bay Area</strong>
          <span>Email Services</span>
        </span>
      </a>

      <button
        className="menu-toggle"
        type="button"
        aria-expanded={menuOpen}
        aria-controls="nav-menu"
        onClick={onMenuToggle}
      >
        <span></span>
        <span></span>
        <span></span>
        <b>Menu</b>
        <span className="sr-only">Open menu</span>
      </button>

      <nav id="nav-menu" className={`nav-menu${menuOpen ? " is-open" : ""}`} onClick={onNavClick}>
        <a href="#why">Why email matters</a>
        <a href="#pricing-detail">Pricing</a>
        <a href="#faq">FAQ</a>
        <a href="#assessment">Get assessment</a>
      </nav>

      <div className="header-actions">
        <a className="phone-link" href="tel:+13617658400" aria-label="Call Bay Area Email Services at 361 765 8400">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"></path>
          </svg>
          Call (361) 765-8400
        </a>
        <button
          className="theme-toggle"
          type="button"
          aria-pressed={theme === "light"}
          aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
          onClick={onThemeToggle}
        >
          <svg className="theme-icon theme-icon-sun" viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2.5"></path>
            <path d="M12 19.5V22"></path>
            <path d="m4.9 4.9 1.8 1.8"></path>
            <path d="m17.3 17.3 1.8 1.8"></path>
            <path d="M2 12h2.5"></path>
            <path d="M19.5 12H22"></path>
            <path d="m4.9 19.1 1.8-1.8"></path>
            <path d="m17.3 6.7 1.8-1.8"></path>
          </svg>
          <svg className="theme-icon theme-icon-moon" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z"></path>
          </svg>
        </button>
        <a className="button button-primary" href="#assessment">Book a 20-minute email assessment</a>
      </div>
    </header>
  );
}