import { PageContainer } from "@/components/layout/page-container";
import { FeaturedProductsRail } from "@/components/sections/home/featured-products-rail.client";
import { Button } from "@/components/ui/button";
import { ProductCard } from "@/components/ui/product-card";
import type { StorefrontProductCard } from "@/types/storefront";

export function ProductRailSection({
  title,
  products,
  buttonHref = "/shop",
  buttonLabel = "Pogledaj sve",
}: {
  title: string;
  products: StorefrontProductCard[];
  buttonHref?: string;
  buttonLabel?: string;
}) {
  if (products.length === 0) {
    return null;
  }

  return (
    <section className="bg-muted-surface py-20">
      <PageContainer className="space-y-8">
        <div className="flex items-end justify-between gap-6">
          <h2 className="text-[38px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
            {title}
          </h2>
          <Button href={buttonHref} size="md">
            {buttonLabel}
          </Button>
        </div>
        <FeaturedProductsRail itemCount={products.length}>
          {products.map((product) => (
            <div
              key={product.id}
              className="min-w-[78%] shrink-0 snap-start sm:min-w-[320px] sm:max-w-[320px] xl:min-w-[calc((100%-60px)/4)] xl:max-w-[calc((100%-60px)/4)]"
            >
              <ProductCard product={product} />
            </div>
          ))}
        </FeaturedProductsRail>
      </PageContainer>
    </section>
  );
}