import ProductCard from "@/components/common/ProductCard";
import type { StoreProduct } from "@/lib/actions/products";

export default function ProductsGrid({
  products,
}: {
  products: StoreProduct[];
}) {
  if (products.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-outline-variant py-16 text-center">
        <p className="text-lg font-medium text-foreground">No products found</p>
        <p className="mt-1 max-w-sm text-sm text-muted-foreground">
          Nothing matches your current filters. Try clearing a filter or
          searching for a different term.
        </p>
      </div>
    );
  }

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