import { GroceryTile } from "@/components/silo/GroceryTile";
import type { Product } from "@/data/types";

export function RelatedProducts({ products }: { products: Product[] }) {
  if (!products.length) return null;

  return (
    <section className="mt-16 border-t border-border pt-12">
      <h2 className="font-serif text-2xl">Also in this bin</h2>
      <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
        {products.slice(0, 6).map((product) => (
          <GroceryTile key={product.id} product={product} layout="grid" />
        ))}
      </div>
    </section>
  );
}