import ProductCard from "@/components/home/ProductCard";
import type { Product } from "@/data/home";

type ProductGridProps = {
  products: Product[];
};

export default function ProductGrid({ products }: ProductGridProps) {
  return (
    <ul
      dir="rtl"
      className="mx-auto grid w-full max-w-[1920px] grid-cols-2 gap-3 px-4 sm:grid-cols-3 sm:gap-4 sm:px-6 md:grid-cols-4 lg:grid-cols-5 lg:gap-[22px] lg:px-[120px]"
    >
      {products.map((product) => (
        <li key={product.id} className="min-w-0">
          <ProductCard product={product} className="max-w-none" />
        </li>
      ))}
    </ul>
  );
}