"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { formatPhoneForTel } from "@/lib/utils";
import { cn } from "@/lib/utils";
import type { SiteSettings } from "@prisma/client";

interface HeaderProps {
  settings: SiteSettings;
  hasUrgencyBanner?: boolean;
}

export function Header({ settings, hasUrgencyBanner = false }: HeaderProps) {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header
      className={cn(
        "fixed left-0 right-0 z-50 transition-[background-color,box-shadow,padding] duration-200",
        hasUrgencyBanner ? "top-10" : "top-0",
        scrolled
          ? "bg-background/95 backdrop-blur-md border-b border-border/80 py-2.5"
          : "bg-background/70 backdrop-blur-sm py-4"
      )}
    >
      <div className="content-wrap flex items-center justify-between gap-4">
        <Link href="/" className="flex items-center gap-2 shrink-0 min-w-0">
          {settings.logoUrl ? (
            <Image
              src={settings.logoUrl}
              alt={settings.businessName}
              width={140}
              height={40}
              className="h-9 w-auto object-contain"
              priority
            />
          ) : (
            <span className="font-heading text-xl text-foreground truncate">
              {settings.businessName}
            </span>
          )}
        </Link>

        <a
          href={`tel:${formatPhoneForTel(settings.phone)}`}
          className="hidden lg:flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
          data-track="header-phone"
        >
          <Phone className="h-4 w-4 text-accent" />
          {settings.phone}
        </a>

        <Button variant="call" size="sm" asChild className="shrink-0">
          <a href={`tel:${formatPhoneForTel(settings.phone)}`} data-track="header-call">
            <Phone className="h-4 w-4" />
            <span className="hidden sm:inline">Call Now</span>
            <span className="sm:hidden">Call</span>
          </a>
        </Button>
      </div>
    </header>
  );
}