"use client";

import { Package } from "lucide-react";
import ProductCard from "./product-card";
import { Product } from "../types";

interface ProductGridProps {
  products: Product[];
  onAddToCart: (product: Product) => void;
  isLoading?: boolean;
}

export default function ProductGrid({
  products,
  onAddToCart,
  isLoading = false,
}: ProductGridProps) {
  if (isLoading) {
    return (
      <div className="grid gap-3 sm:gap-4" style={{
        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
      }}>
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="animate-pulse bg-muted/30 rounded-lg aspect-square" />
        ))}
      </div>
    );
  }

  if (products.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <Package className="h-12 w-12 text-muted-foreground/50 mb-4" />
        <p className="text-muted-foreground">No products found.</p>
        <p className="text-sm text-muted-foreground/70 mt-1">
          Try adjusting your search or filter.
        </p>
      </div>
    );
  }

  return (
    <div className="grid gap-3 sm:gap-4" style={{
      gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
    }}>
      {products.map((product) => (
        <ProductCard
          key={product.id}
          product={product}
          onAddToCart={onAddToCart}
        />
      ))}
    </div>
  );
}