Navbar Tabs

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface NavbarTabsProps {
  brand?: string;
  brandHref?: string;
  tabs?: { label: string; href: string; emoji?: string }[];
  defaultActive?: string;
  cta?: { label: string; href: string };
  className?: string;
}

/** Two-row navbar: brand + CTA on top, then a horizontally scrollable strip of pill tabs (with emoji) whose active tab is a soft filled pill. */
export function NavbarTabs({
  brand = "Planta",
  brandHref = "/",
  tabs = [
    { label: "For teams", href: "#teams", emoji: "👋" },
    { label: "For freelancers", href: "#freelancers", emoji: "🎨" },
    { label: "For students", href: "#students", emoji: "📚" },
    { label: "Templates", href: "#templates", emoji: "🧩" },
    { label: "Integrations", href: "#integrations", emoji: "🔌" },
    { label: "Pricing", href: "#pricing", emoji: "🏷️" },
  ],
  defaultActive = "#teams",
  cta = { label: "Start planning", href: "#signup" },
  className,
}: NavbarTabsProps) {
  const [active, setActive] = useState(defaultActive);
  return (
    <header className={cn("bg-da-surface text-da-surface-fg shadow-da-sm", className)}>
      <div className="da-container flex h-16 items-center justify-between gap-4">
        <a href={brandHref} className="da-focus flex items-center gap-2 rounded-da-md font-da-display text-xl font-extrabold tracking-da-display">
          <span aria-hidden className="grid size-8 place-items-center rounded-full bg-da-secondary text-lg">
            🌱
          </span>
          {brand}
        </a>
        <a
          href={cta.href}
          className="da-focus da-transition inline-flex h-10 items-center rounded-da-pill bg-da-primary px-5 text-sm font-semibold text-da-primary-fg hover:-translate-y-0.5"
        >
          {cta.label}
        </a>
      </div>
      <nav aria-label="Sections" className="da-container overflow-x-auto pb-3 [scrollbar-width:none]">
        <ul className="flex w-max gap-2">
          {tabs.map((t) => (
            <li key={t.href}>
              <a
                href={t.href}
                aria-current={t.href === active ? "page" : undefined}
                onClick={() => setActive(t.href)}
                className={cn(
                  "da-focus da-transition inline-flex items-center gap-2 rounded-da-pill px-4 py-2 text-sm font-medium whitespace-nowrap",
                  t.href === active ? "bg-da-fg text-da-bg" : "bg-da-surface-2 text-da-muted-fg hover:text-da-fg",
                )}
              >
                {t.emoji && <span aria-hidden>{t.emoji}</span>}
                {t.label}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
}

export default NavbarTabs;