"use client";

import { useState, useCallback } from "react";
import { ModernProductCard, type ModernProduct } from "./modern-product-card";
import { ProductQuickViewModal } from "./product-quick-view-modal";
import { type Locale } from "@/config/i18n.config";

interface ProductGridClientProps {
  products: ModernProduct[];
  locale: Locale;
  showQuickView?: boolean;
}

export function ProductGridClient({
  products,
  locale,
  showQuickView = true,
}: ProductGridClientProps) {
  const [quickViewProduct, setQuickViewProduct] = useState<ModernProduct | null>(
    null
  );

  const handleQuickView = useCallback((product: ModernProduct) => {
    setQuickViewProduct(product);
  }, []);

  const handleCloseModal = useCallback(() => {
    setQuickViewProduct(null);
  }, []);

  return (
    <>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
        {products.map((product: ModernProduct) => (
          <ModernProductCard
            key={product._id}
            product={product}
            locale={locale}
            showQuickView={showQuickView}
            onQuickView={showQuickView ? handleQuickView : undefined}
          />
        ))}
      </div>
      <ProductQuickViewModal
        product={quickViewProduct}
        locale={locale}
        open={!!quickViewProduct}
        onClose={handleCloseModal}
      />
    </>
  );
}