'use client';
import Countdown from '@/components/elements/Countdown';
import Layout from "@/components/layout/Layout";
import { memoryData } from '@/utility/constant.utils';
import Link from "next/link";
import { useState } from 'react';

export default function Memories() {
    const years = Object.keys(memoryData).sort((a, b) => Number(b) - Number(a));
    const [selectedYear, setSelectedYear] = useState(years[0]); // Default to latest year

    return (
        <Layout headerStyle={1} footerStyle={1}>
            <div>
                {/* Header Section */}
                <div
                    className="inner-page-header"
                    style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
                >
                    <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 sp1">
                    <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">
                                    {memoryData[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>
    );
}