"use client";
import { useEffect, useState } from "react";
import EmptyState from "./emptyData";
import { GET } from "@/lib/allProducts";
import { ProductModal } from "../ProductModal";
import { motion } from "framer-motion";
import { ProductCard } from "../ProductCard";

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

export default function Products() {
  const [allProducts, setAllProducts] = useState<any>(null);
  const [selectedProduct, setSelectedProduct] = useState<any>(null);
  useEffect(() => {
    const all = GET();
    all && Array.isArray(all) && all.length > 0
      ? setAllProducts(all)
      : setAllProducts([]);
    setAllProducts;
  }, []);
  const handleViewDetails = (slug: string) => {
    const product = allProducts.find((p: any) => p.slug === slug);
    if (product) {
      setSelectedProduct(product);
    }
  };
  return (
    <div className="">
      {allProducts && allProducts.length > 0 ? (
        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
          {allProducts.map((product: any) => (
            <motion.div key={product.id} variants={itemVariants}>
              <ProductCard
                product={product}
                onViewDetails={handleViewDetails}
              />
            </motion.div>
          ))}
        </div>
      ) : (
        <EmptyState />
      )}
      {/* Product Modal */}
      {selectedProduct && (
        <ProductModal
          product={selectedProduct}
          onClose={() => setSelectedProduct(null)}
        />
      )}
    </div>
  );
}