import { WaveSvg } from "@/components/svgs";
import { useState } from "react";

export interface Activity {
    title: string;
    description?: string;
    image: string;
    blob: string;
}

// Improved image component with error handling and optimal SEO attributes
export function ImageContainer({ activity, id }: { activity: Activity, id: string }) {
    const [imageError, setImageError] = useState(false);

    return (
        <article>
            <div className="w-full flex justify-center">
                <div className="relative w-64 h-64 overflow-hidden rounded-full shadow-lg">
                    <img 
                        src={activity.image} 
                        alt={`${activity.title} - Activité canyoning dans l'Ain et le Jura - Sources et Nature`}
                        className="w-full h-full object-cover rounded-full scale-110"
                        onError={() => setImageError(true)}
                        loading="lazy"
                        width="256"
                        height="256"
                        fetchPriority="high"
                        style={{
                            opacity: imageError ? 0.3 : 1,
                            objectPosition: 'center center'
                        }}
                    />
                    {imageError && (
                        <div className="absolute inset-0 flex items-center justify-center bg-gray-200 bg-opacity-50 rounded-full">
                            <span className="text-gray-700">Image non disponible</span>
                        </div>
                    )}
                </div>
            </div>
            <h2 className="text-center text-background font-bold text-3xl uppercase mt-4">{activity.title}</h2>
            <p className="text-center text-background opacity-90 pt-2">{activity.description}</p>
        </article>
    );
}

export default function Activities() {
    const activitiesData: Activity[] = [
        {
            title: "Toboggans",
            description: "Glissez dans les toboggans naturels sculptés par les torrents du Jura depuis des millénaires.",
            image: "/activities/slide.webp",
            blob: "M395.078 119.728C367.548 -44.62 166.708 30.0988 84.5066 79.9847C-35.8505 150.777 31.0878 407.866 111.44 407.866C191.397 407.866 236.847 447.61 266.305 435.811C295.763 424.012 357.625 415.939 357.625 325.275C357.625 234.61 413.595 230.264 395.078 119.728Z"
        },
        {
            title: "Sauts",
            description: "Sensations fortes garanties dans les vasques cristallines de l'Ain, de 3 à 10 mètres (optionnels).",
            image: "/activities/jump.webp",
            blob: "M109.853 23.1412C-39.1979 53.4974 28.5662 274.949 73.8088 365.587C138.012 498.297 371.171 424.489 371.171 335.89C371.171 247.726 407.216 197.612 396.515 165.131C385.815 132.65 378.493 64.4388 296.267 64.4388C214.042 64.4388 210.101 2.7243 109.853 23.1412Z"
        },
        {
            title: "Descente en rappel",
            description: "Descendez les cascades spectaculaires du massif du Jura en toute sécurité avec nos cordes.",
            image: "/activities/down.webp",
            blob: "M306.815 433.859C455.865 403.503 388.101 182.051 342.859 91.4127C278.655 -41.2968 45.4961 32.5114 45.4961 121.11C45.4961 209.274 9.4516 259.388 20.1522 291.869C30.8527 324.35 38.1747 392.561 120.4 392.561C202.625 392.561 206.567 454.276 306.815 433.859Z"
        }
    ];

    return (
        <section className="relative pt-10 w-full min-h-[600px]">
            <WaveSvg className="fill-secondary -mb-2" />
            <div className="bg-secondary py-16 px-4">
                <div className="pb-20">
                    <h1 className="main-title text-background">AVENTURES AQUATIQUES <br />
                        JURA & AIN</h1>
                </div>
                <div className="container mx-auto">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {activitiesData.map((activity, index) => (
                            <div
                                key={`${activity.title}-${index}`}
                                className={`${index === 3 ? "lg:col-start-2" : ""} z-10`}
                            >
                                <ImageContainer id={index.toString()} activity={activity} />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}