"use client";

import Link from "next/link";
import { useState } from "react";
import ProductCardView, { type CardData } from "./ProductCardView";

/** Mirrors the reference footer's category tabs with a horizontally scrolling product strip. */
export default function FooterShop({ tabs, products }: { tabs: { slug: string; name: string }[]; products: (CardData & { category: string })[] }) {
  const [tab, setTab] = useState("all");
  const shown = products.filter((p) => tab === "all" || p.category === tab).slice(0, 10);
  return (
    <div>
      <div className="flex items-center justify-between gap-6">
        <div role="tablist" aria-label="Shop by category" className="flex gap-6 overflow-x-auto no-scrollbar">
          {tabs.map((t) => (
            <button key={t.slug} role="tab" aria-selected={tab === t.slug} onClick={() => setTab(t.slug)}
              className={`nav-type whitespace-nowrap pb-1 border-b ${tab === t.slug ? "border-ink" : "border-transparent text-stone hover:text-ink"}`}>{t.name}</button>
          ))}
        </div>
        <Link href={tab === "all" ? "/shop" : `/collections/${tab}`} className="link-line whitespace-nowrap">See all</Link>
      </div>
      <div className="mt-8 flex gap-4 md:gap-6 overflow-x-auto no-scrollbar snap-x pb-2">
        {shown.map((p) => <div key={p.slug} className="snap-start shrink-0 w-[44vw] sm:w-[30vw] md:w-[19vw] lg:w-[15vw]"><ProductCardView p={p} compact /></div>)}
      </div>
    </div>
  );
}