'use client';
import axios from 'axios';
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { useState, useEffect } from 'react';

export default function Memories() {
    
    const [selectedYear, setSelectedYear] = useState(''); 
    const [events, setEvents]=useState([]);
    const [years, setYears] = useState([]);

     useEffect(() => {
        getEvents();
    }, [])

    const getEvents = async () => {
        try {
          const eventRes = await axios?.get('https://api.tamilculturewaterloo.org/api/events/');
            console.log("eventRes", eventRes)
            setEvents(eventRes?.data?.data)
            const years = Object.keys(eventRes?.data).sort((a, b) => Number(b) - Number(a));
             setYears(years);

              // Default to latest year
                if (years.length > 0) {
                    setSelectedYear(years[0]);
                }

        } catch (error) {
            console.log("error fetching data", error)
        }
    }

    return (
        <Layout headerStyle={1} footerStyle={1}>
            <div>
                {/* Header Section */}
                <div
                    className="inner-page-header"
                    style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6 m-auto">
                                <div className="heading1 text-center">
                                    <h1>Recent Memories</h1>
                                    <div className="space20" />
                                    <Link href="/">
                                        Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Memory Section */}
                <div className="memory-inner-section-area blog-details-section sp4">
                    <div className="container">
                        <div className="row gx-5">
                            {/* Left Column: Year Tabs */}
                            <div className="col-lg-3 mb-4 mb-lg-0">
                                <div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
                                    <div className="blog-categories">
                                        <ul className="list-unstyled">
                                            {years.map((year) => (
                                                <li key={year}>
                                                    <button
                                                        onClick={() => setSelectedYear(year)}
                                                        className={`btn w-100 mb-2 category-btn ${selectedYear === year && 'active'}`}
                                                    >
                                                        Years {year}
                                                    </button>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            {/* Right Column: Gallery */}
                            <div className="col-lg-9">
                                {/* <div className="heading12 mb-4 border-bottom pb-2">
                                    <h2 className="text-center">📷 Memories of {selectedYear}</h2>
                                </div> */}

                                <div className="row justify-content-start">
                                    {events[selectedYear]?.map((event, idx) => (
                                        <div className="col-lg-4 col-md-6 mb-4" key={idx}>
                                            <div className="memory3-boxarea">
                                                <div className="img1">
                                                    <img src={event.image} alt={event.title} />
                                                </div>
                                                <div className="content-area">
                                                    <p>{event.date}</p>
                                                    <div className="space12" />
                                                    <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
                                                    <div className="plus">
                                                        <Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
                                                            <i className="fa-solid fa-plus" />
                                                        </Link>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}