import Link from 'next/link';
import type { PlazaCategory } from '@/types/plaza';
import { plazaPath } from '@/lib/site';

export function CategoryNav({
  categories,
  activeSlug,
}: {
  categories: PlazaCategory[];
  activeSlug?: string;
}) {
  return (
    <div className="flex gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
      <Link
        href={plazaPath()}
        className={`shrink-0 rounded-full px-4 py-2 text-sm font-medium transition ${
          !activeSlug
            ? 'bg-[#2f6f57] text-white'
            : 'bg-[#ebe4d6] text-[#4a5751] hover:bg-[#dfd7c8]'
        }`}
      >
        全部
      </Link>
      {categories.map((cat) => (
        <Link
          key={cat.id}
          href={plazaPath(`cat/${cat.slug}`)}
          className={`shrink-0 rounded-full px-4 py-2 text-sm font-medium transition ${
            activeSlug === cat.slug
              ? 'bg-[#2f6f57] text-white'
              : 'bg-[#ebe4d6] text-[#4a5751] hover:bg-[#dfd7c8]'
          }`}
        >
          {cat.icon} {cat.name}
        </Link>
      ))}
    </div>
  );
}