import Image from "next/image";
import { WaveSvg } from "../svgs";
import { ImageModal } from "@/components/global/fullscreen-image";
import { useState } from "react";
import OptimizedImage from "../global/optimized-image";

interface NatureCard {
    title: string;
    description: string;
    images: ImageData[];
}

interface ImageData {
    src: string;
    alt: string;
}

export default function Nature() {
    const [selectedImage, setSelectedImage] = useState<ImageData | null>(null);
    
    const natureData: NatureCard[] = [
        {
            title: "Faune",
            description: "Découvrez la faune exceptionnelle des gorges du Jura et de l'Ain : chamois, lynx, faucons pèlerins et salamandres tachetées.",
            images: [
                { src: "/nature/animals/1.webp", alt: "Faune des canyons du Jura - Chamois et bouquetins" },
                { src: "/nature/animals/2.webp", alt: "Oiseaux des gorges de l'Ain - Faucon pèlerin" },
                { src: "/nature/animals/3.webp", alt: "Amphibiens des rivières du Jura - Salamandre tachetée" }
            ]
        },
        {
            title: "Flore",
            description: "Explorez la flore remarquable des canyons : fougères scolopendres, mousses aquatiques et orchidées sauvages du Jura.",
            images: [
                { src: "/nature/plants/1.webp", alt: "Flore des canyons du Jura - Fougères et mousses" },
                { src: "/nature/plants/2.webp", alt: "Plantes aquatiques de l'Ain - Végétation de canyon" },
                { src: "/nature/plants/3.webp", alt: "Orchidées sauvages du Jura - Flore protégée" }
            ]
        },
    ];

    return (
        <section className="relative w-full min-h-[600px] z-10">
            <WaveSvg className="fill-accent -mb-4 bg-secondary" />
            <div className="bg-accent py-16 px-4">
                <div className="pb-20">
                    <h1 className="main-title text-background">Écosystèmes préservés <br />
                        du Jura et de l&apos;Ain</h1>
                </div>
                <div className="container mx-auto">
                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-32 xl:gap-8">
                        {natureData.map((nature, index) => (
                            <NatureCard key={`${nature.title}-${index}`} data={nature} setSelectedImage={setSelectedImage}/>
                        ))}
                    </div>
                </div>
            </div>
            <WaveSvg className="fill-accent -mt-2 rotate-180" />
            <ImageModal
                image={selectedImage as ImageData}
                isOpen={!!selectedImage}
                onClose={() => setSelectedImage(null)}
            />
        </section>
    )
}

export function NatureCard({ data, setSelectedImage } : { data: NatureCard, setSelectedImage: (data: ImageData) => void }) {
    return (
        <article className="flex flex-col gap-4 items-center">
            <OptimizedImage 
                src={data.images[0].src}
                alt={data.images[0].alt}
                containerClassName="w-[350px] h-[298px] sm:w-[450px] sm:h-[383px] md:w-[700px] md:h-[596px] relative overflow-hidden rounded-2xl shadow-lg"
                className="object-cover w-full h-full cursor-pointer hover:scale-110 transition-all rounded-2xl"
                onClick={() => setSelectedImage(data.images[0])}
            />

            <h1 className="text-background text-2xl font-bold uppercase">{data.title}</h1>
            <p className="text-background opacity-90 text-center">{data.description}</p>
            {data.images.length > 1 && (
                <div className="grid grid-cols-2 gap-6">
                    {data.images.slice(1).map((image, index) => (
                        <OptimizedImage 
                            key={`${data.title}-${index}`}
                            src={image.src}
                            alt={image.alt}
                            containerClassName="w-[140px] h-[119px] sm:w-[220px] sm:h-[187px] relative overflow-hidden rounded-2xl shadow-md"
                            className="object-cover w-full h-full cursor-pointer hover:scale-110 transition-all rounded-2xl"
                            onClick={() => setSelectedImage(image)}
                        />
                    ))}
                </div>
            )}
        </article>
    )
}