"use client";

import { ProductCard } from "@/components/product/ProductCard";
import { Stagger, StaggerItem } from "@/components/motion/Stagger";
import type { Product } from "@/data/types";

/** Related styles in the same compact 6-across atelier grid. */
export function RelatedProducts({ products }: { products: Product[] }) {
  if (!products.length) return null;

  return (
    <section className="mt-14 border-t border-border pt-10">
      <p className="text-[10px] font-medium uppercase tracking-[0.2em] text-[var(--accent)]">
        Also in the atelier
      </p>
      <h2 className="font-display mt-1 text-2xl leading-none">You may also like</h2>
      <Stagger className="product-grid mt-5">
        {products.slice(0, 6).map((product, index) => (
          <StaggerItem key={product.id}>
            <ProductCard product={product} index={index} />
          </StaggerItem>
        ))}
      </Stagger>
    </section>
  );
}