"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { ProductCard } from "./ProductCard";
import { getAllProducts } from "@/lib/products";
import type { Product } from "@/lib/products";
import { ProductModal } from "./ProductModal";
import Image from "next/image";
import { useLanguage } from "@/context/language-context";

// hello everyone

export function ProductsGrid() {
  const {t} = useLanguage();
  const products = getAllProducts();
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);

  const handleViewDetails = (slug: string) => {
    const product = products.find((p) => p.slug === slug);
    if (product) {
      setSelectedProduct(product);
    }
  };

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 },
    },
  };

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

  return (
    <>
      <section id="products" className="relative py-20">
        <div className="absolute -z-40 top-0 left-0 h-full w-full">
          <Image
            src="/images/hero2.jpg"
            alt="hero image"
            fill
            className="object-cover"
          />
        </div>
        <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40"/>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
          >
            <h2 className="text-2xl font-bold text-gray-900 mb-2">
              {t.products.title}
            </h2>
            <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
          </motion.div>

          {/* Product Grid */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {products.map((product) => (
              <motion.div key={product.id} variants={itemVariants}>
                <ProductCard
                  product={product}
                  onViewDetails={handleViewDetails}
                />
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Product Modal */}
      {selectedProduct && (
        <ProductModal
          product={selectedProduct}
          onClose={() => setSelectedProduct(null)}
        />
      )}
    </>
  );
}
