"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

type Props = {
  siteName: string;
  tagline: string;
  phone: string;
};

const navItems = [
  { label: "Главная", href: "/" },
  { label: "Услуги", href: "/services" },
  { label: "Специалисты", href: "/specialists" },
  { label: "Документы", href: "/documents" },
  { label: "Отзывы", href: "/reviews" },
];

export function SiteHeader({ siteName, tagline, phone }: Props) {
  const pathname = usePathname();

  const compactName = siteName
    .replace("Консультационное клиническое ", "")
    .replace("консультационное клиническое ", "");

  return (
    <header className="site-header">
      <div className="container site-header__inner">
        <Link href="/" className="brand">
          <span className="brand__eyebrow">Ставрополь</span>
          <span className="brand__name">{compactName || "Патологоанатомическое бюро"}</span>
          <span className="brand__tag">{tagline}</span>
        </Link>

        <nav className="nav" aria-label="Основная навигация">
          {navItems.map((item) => {
            const isActive =
              item.href === "/"
                ? pathname === "/"
                : pathname === item.href || pathname.startsWith(`${item.href}/`);

            return (
              <Link
                key={item.href}
                href={item.href}
                className={`nav__link${isActive ? " nav__link--active" : ""}`}
              >
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="header-actions">
          <a className="phone-pill" href={`tel:${phone.replace(/[^\d+]/g, "")}`}>
            {phone}
          </a>
        </div>
      </div>
    </header>
  );
}