import { cn } from "@/lib/utils";
import Title from "../home/Title";
import ProductCard from "./ProductCard";
import type { StoreProduct } from "@/lib/actions/products";

function HomeProductsGrid({
  products,
  href,
  title,
  className,
}: {
  products: StoreProduct[];
  href?: string;
  title: string;
  className?: string;
}) {
  if (!products || products.length === 0) {
    return null;
  }

  return (
    <>
      <Title href={href}>{title}</Title>
      <div
        className={cn(
          "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4",
          className,
        )}
      >
        {products.map((product) => (
          <ProductCard
            key={product.id}
            productId={product.id}
            title={product.title}
            description={product.description}
            price={product.price}
            imageUrl={product.imageUrl}
            link={product.link}
            isFeatured={product.isFeatured}
          />
        ))}
      </div>
    </>
  );
}

export default HomeProductsGrid;