"use client";

import Link from "next/link";

/**
 * Horizontal strip of category links: scroll on mobile, wrap on tablet+.
 * Used for "recommended sub-categories" or "other top categories".
 */
export type CategoryStripLink = { label: string; href: string };

export function ShopCategoryStrip({ links }: { links: CategoryStripLink[] }) {
  if (links.length === 0) return null;

  return (
    <div className="w-full py-4">
      <div
        className="flex gap-2 overflow-x-auto scrollbar-hide pb-2 md:flex-wrap md:overflow-visible md:pb-0"
        style={{ scrollSnapType: "x proximity" }}
      >
        {links.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className="shrink-0 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-sm font-medium text-[var(--foreground)] transition-colors hover:bg-[var(--brand-light)]/30 focus:outline-none focus:ring-2 focus:ring-[var(--accent)] focus:ring-offset-2"
            style={{ scrollSnapAlign: "start" }}
          >
            {link.label}
          </Link>
        ))}
      </div>
    </div>
  );
}
