import React from 'react'
import './gallery.css'
import { useEffect, useState } from 'react';
// import { FiZoomIn } from 'react-icons/fi';
import { motion } from 'framer-motion';

function Gallery() {
    const [selectedImage, setSelectedImage] = useState(null);
    const [loading, setLoading] = useState(true);

    const images = [
        { id: 1, src: "1.jpg", alt: "Laboratory Equipment 1", category: "Lab" },
        { id: 2, src: "2.jpg", alt: "Laboratory Equipment 2", category: "Lab" },
        { id: 3, src: "3.jpg", alt: "Laboratory Equipment 3", category: "Lab" },
        { id: 4, src: "4.jpg", alt: "Testing Process 1", category: "Testing" },
        { id: 5, src: "5.jpg", alt: "Testing Process 2", category: "Testing" },
        { id: 6, src: "6.jpg", alt: "Testing Process 3", category: "Testing" },
        { id: 8, src: "8.jpg", alt: "Results 1", category: "Results" },
        { id: 9, src: "9.jpg", alt: "Results 2", category: "Results" },
        { id: 10, src: "10.jpg", alt: "Results 3", category: "Results" }
    ];

    useEffect(() => {
        window.scrollTo({ top: 0, behavior: "smooth" })
        // Simulate images loading
        const loadImages = async () => {
            await Promise.all(
                images.map(img => {
                    return new Promise((resolve) => {
                        const image = new Image();
                        image.src = img.src;
                        image.onload = resolve;
                    });
                })
            );
            setLoading(false);
        };
        loadImages();
    }, [])

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

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

    return (
        <div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-800 py-20">
            {/* Hero Section */}
            <div className="container mx-auto px-4 mb-16 my-20">
                <div className="text-center">
                    <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
                        Нашата Галерија
                    </h1>
                    <p className="text-xl text-gray-300 max-w-2xl mx-auto">
                        Погледнете ја нашата опрема и работен процес преку слики
                    </p>
                </div>
            </div>

            {loading ? (
                <div className="flex justify-center items-center h-64">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
                </div>
            ) : (
                <motion.div 
                    className="container mx-auto px-4"
                    variants={containerVariants}
                    initial="hidden"
                    animate="visible"
                >
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {images.map((image) => (
                            <motion.div
                                key={image.id}
                                className=""
                                variants={itemVariants}
                            >
                                <div className="aspect-w-16 aspect-h-12 rounded-xl overflow-hidden bg-white/10 backdrop-blur-lg">
                                    <img
                                        src={image.src}
                                        alt={image.alt}
                                        className="w-full h-full object-cover transition-transform duration-300"
                                    />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                        <div className="absolute bottom-0 left-0 right-0 p-4">
                                            <p className="text-white text-sm">{image.alt}</p>
                                            <span className="text-blue-400 text-xs">{image.category}</span>
                                        </div>
                                    </div>
                                    <button
                                        onClick={() => setSelectedImage(image)}
                                        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-500 p-3 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                                    >
                                        {/* <FiZoomIn className="w-6 h-6 text-white" /> */}
                                    </button>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </motion.div>
            )}

            {/* Image Modal */}
            {selectedImage && (
                <div 
                    className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
                    onClick={() => setSelectedImage(null)}
                >
                    <div className="relative max-w-4xl w-full">
                        <img
                            src={selectedImage.src}
                            alt={selectedImage.alt}
                            className="w-full h-auto rounded-xl"
                        />
                        <button
                            onClick={() => setSelectedImage(null)}
                            className="absolute top-4 right-4 text-white hover:text-blue-400"
                        >
                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
}

export default Gallery