'use client';

import { getProductColors } from "@/components/products/utils/colorUtils";
import { ProductCard } from "@/components/ui/ProductCard";
import { Product } from "lib/shopify/types";

interface ProductsListProps {
  products: Product[];
}

export function ProductsList({ products }: ProductsListProps) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-12">
      {products.map((product) => (
        <div key={product.id} className="h-full">
          <ProductCard 
            title={product.title}
            variant={product.variants[0]?.title || ""}
            price={parseFloat(product.priceRange.maxVariantPrice.amount)}
            imageSrc={product.featuredImage?.url || "/assets/images/placeholder_image.svg"}
            slug={product.handle}
            product={product}
            colors={getProductColors(product)}
          />
        </div>
      ))}
    </div>
  );
} 