"use client";

import { products } from "@/lib/data";
import { ProductCard } from "@/components/product-card";

export function RelatedProducts({ currentId }: { currentId: string }) {
  const items = products.filter((item) => item.id !== currentId).slice(0, 4);

  return (
    <section className="mt-16">
      <h3 className="mb-5 text-2xl font-semibold">Complete The Look</h3>
      <div className="grid snap-x grid-flow-col auto-cols-[78%] gap-4 overflow-x-auto pb-2 md:grid-cols-4 md:auto-cols-auto md:overflow-visible">
        {items.map((item) => (
          <div key={item.id} className="snap-start">
            <ProductCard product={item} />
          </div>
        ))}
      </div>
    </section>
  );
}