/** نوار برندها؛ هر برند با نام انگلیسی به‌صورت تایپوگرافی نمایش داده می‌شود */
import Link from "next/link";
import type { Brand } from "@/types/catalog";

export function BrandStrip({ brands }: { brands: Brand[] }) {
  return (
    <section className="py-8" aria-labelledby="brands-title">
      <div className="container-z mb-4 flex items-end justify-between">
        <h2 id="brands-title" className="section-title">برندها</h2>
        <Link href="/brands" className="text-xs font-medium underline underline-offset-4">همه برندها</Link>
      </div>
      <ul className="scrollbar-none container-z flex snap-x gap-3 overflow-x-auto">
        {brands.map((b) => (
          <li key={b.id} className="shrink-0 snap-start">
            <Link href={`/brand/${b.slug}`} className="flex h-24 w-40 flex-col items-center justify-center gap-1 rounded-2xl border border-line transition-colors hover:border-ink">
              <span className="text-sm font-medium tracking-[0.3em]">{b.nameEn}</span>
              <span className="text-[11px] text-muted">{b.name}</span>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}