AppHeader.tsx

import Link from "next/link";

type AppHeaderProps = {
  currentPath: "/" | "/catalog" | "/favorites" | "detail";
};

const AppHeader = ({ currentPath }: AppHeaderProps) => {
  const homeActive = currentPath === "/";
  const catalogActive = currentPath === "/catalog";
  const favoritesActive = currentPath === "/favorites";
  const serviceTabs = [
    { label: "All", icon: "🌍", href: "/" },
    { label: "Homes", icon: "🏡", href: "/catalog" },
    { label: "Favoritos", icon: "❤️", href: "/favorites" },
  ];

  return (
    <header className="sticky top-0 z-30 border-b border-zinc-200 bg-white">
      <div className="mx-auto w-full max-w-[1180px] px-4 pt-3 md:px-6 md:pt-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="text-[2rem] font-black tracking-tight text-[#ff385c]">
            airbnb
          </Link>

          <div className="hidden items-center gap-3 text-sm md:flex">
            <button type="button" className="rounded-full px-3 py-2 font-semibold text-zinc-800 hover:bg-zinc-100">
              Become a host
            </button>
            <button type="button" className="rounded-full bg-zinc-100 p-2.5">🌐</button>
            <button type="button" className="rounded-full bg-zinc-100 p-2.5">☰</button>
          </div>
        </div>

        <nav className="no-scrollbar mt-3 flex items-center gap-6 overflow-x-auto pb-3 text-zinc-600 md:justify-center">
          {serviceTabs.map((tab) => {
            const active =
              (homeActive && tab.label === "All") ||
              (catalogActive && tab.label === "Homes") ||
              (favoritesActive && tab.label === "Favoritos") ||
              (currentPath === "detail" && tab.label === "Homes");

            return (
              <Link
                key={tab.label}
                href={tab.href}
                className={`flex min-w-fit items-center gap-2 border-b-2 px-1 pb-2 text-base font-semibold transition ${
                  active
                    ? "border-zinc-900 text-zinc-900"
                    : "border-transparent text-zinc-500 hover:text-zinc-800"
                }`}
              >
                <span aria-hidden="true">{tab.icon}</span>
                <span>{tab.label}</span>
              </Link>
            );
          })}
        </nav>
      </div>
    </header>
  );
};

export default AppHeader;