ImageCarrousel.tsx

"use client";

import { useState } from "react";
import Image from "next/image";

interface ImageCarrouselProps {
    images: string[];
    titre: string;
}

export default function ImageCarrousel({ images, titre }: ImageCarrouselProps) {
    const [currentIndex, setCurrentIndex] = useState(0);

    const goToPrevious = () => {
        const isFirstSlide = currentIndex === 0;
        const newIndex = isFirstSlide ? images.length - 1 : currentIndex - 1;
        setCurrentIndex(newIndex);
    };

    const goToNext = () => {
        const isLastSlide = currentIndex === images.length - 1;
        const newIndex = isLastSlide ? 0 : currentIndex + 1;
        setCurrentIndex(newIndex);
    };

    const goToSlide = (slideIndex: number) => {
        setCurrentIndex(slideIndex);
    };

    if (!images || images.length === 0) {
        return (
            <div className="flex aspect-video w-full items-center justify-center rounded-xl bg-gray-200 text-gray-500">
                Aucune image disponible
            </div>
        );
    }

    return (
        <div className="relative aspect-video h-auto w-full">
            {/* Image principale */}
            <div className="h-full w-full overflow-hidden rounded-xl">
                <Image
                    src={images[currentIndex]}
                    alt={`${titre} - Image ${currentIndex + 1}`}
                    fill
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    style={{ objectFit: "cover" }}
                    className="transition-opacity duration-300 ease-in-out"
                    priority={currentIndex === 0}
                />
            </div>

            {/* Flèche Gauche */}
            <div className="absolute top-1/2 left-4 -translate-y-1/2 transform">
                <button
                    onClick={goToPrevious}
                    className="bg-opacity-40 hover:bg-opacity-60 rounded-full bg-black p-2 text-white transition"
                    aria-label="Image précédente"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
            </div>

            {/* Flèche Droite */}
            <div className="absolute top-1/2 right-4 -translate-y-1/2 transform">
                <button
                    onClick={goToNext}
                    className="bg-opacity-40 hover:bg-opacity-60 rounded-full bg-black p-2 text-white transition"
                    aria-label="Image suivante"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>

            {/* Indicateurs (points) */}
            <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 space-x-2">
                {images.map((_, slideIndex) => (
                    <button
                        key={slideIndex}
                        onClick={() => goToSlide(slideIndex)}
                        className={`h-3 w-3 rounded-full transition ${currentIndex === slideIndex ? "bg-white" : "bg-white/50 hover:bg-white/75"}`}
                        aria-label={`Aller à l'image ${slideIndex + 1}`}
                    />
                ))}
            </div>
        </div>
    );
}