import Link from "next/link";

export type StoreSubNavKey =
  | "store"
  | "collections"
  | "all-goods"
  | "portfolio"
  | "lookbook"
  | "shipping"
  | "returns"
  | "store-policy";

// Colours below use arbitrary hex values matching the design tokens the layout agent is
// adding to tailwind.config.ts (ink #1d2739, neutral-600 #6f7885, divider rgba(29,39,57,.18),
// neutral-300 #dfe3e9). Swap these for the token classes (text-ink, text-neutral-600,
// border-divider, text-neutral-300) once that config lands.
const ITEMS: { key: StoreSubNavKey; label: string; href: string }[] = [
  { key: "store", label: "Store", href: "/shop" },
  { key: "collections", label: "Collections", href: "/collections" },
  { key: "all-goods", label: "All goods", href: "/shop" },
  // No dedicated Portfolio route exists in this app yet — point at the shop index
  // rather than a dead link.
  { key: "portfolio", label: "Portfolio", href: "/shop" },
  { key: "lookbook", label: "Lookbook", href: "/lookbook" },
  { key: "shipping", label: "Shipping", href: "/shipping-policy" },
  { key: "returns", label: "Returns", href: "/return-policy" },
  { key: "store-policy", label: "Store policy", href: "/store-policy" }
];

/** Store sub-nav bar shared by the shop grid, PDP, collections, and lookbook screens —
 *  matches the reference's STORE | COLLECTIONS | ALL GOODS | PORTFOLIO | LOOKBOOK |
 *  SHIPPING | RETURNS | STORE POLICY strip directly under the global header. */
export default function StoreSubNav({ active }: { active: StoreSubNavKey }) {
  return (
    <nav className="border-b border-[rgba(29,39,57,0.18)]">
      <div className="mx-auto w-full max-w-content px-6 lg:px-10 flex flex-wrap items-center gap-x-6 gap-y-2 py-4 text-[11px] font-semibold uppercase tracking-[0.11em]">
        {ITEMS.map((item, i) => (
          <span key={item.key} className="flex items-center gap-x-6">
            {i === 1 ? <span className="text-[#dfe3e9]">|</span> : null}
            <Link
              href={item.href}
              className={
                active === item.key
                  ? "text-[#1d2739] border-b-2 border-[#1d2739] pb-0.5"
                  : "text-[#6f7885] hover:text-[#1d2739] transition-colors"
              }
            >
              {item.label}
            </Link>
          </span>
        ))}
      </div>
    </nav>
  );
}