/** ردیف افقی محصولات با اسکرول لمسی (scroll-snap) */
import Link from "next/link";
import type { ProductSummary } from "@/types/catalog";
import { ProductCard } from "./ProductCard";

export function ProductRail({ title, href, products }: { title: string; href?: string; products: ProductSummary[] }) {
  return (
    <section className="py-8">
      <div className="container-z mb-4 flex items-end justify-between">
        <h2 className="section-title">{title}</h2>
        {href && (
          <Link href={href} className="text-xs font-medium underline underline-offset-4">
            مشاهده همه
          </Link>
        )}
      </div>
      <div className="scrollbar-none container-z flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:gap-5">
        {products.map((p) => (
          <div key={p.id} className="w-[44%] shrink-0 snap-start sm:w-[30%] md:w-[23%] lg:w-[18%]">
            <ProductCard product={p} />
          </div>
        ))}
      </div>
    </section>
  );
}