"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";

interface Album {
  id: string;
  title: string;
  slug: string;
  cover: string | null;
}

const KeyPerformances = () => {
  const [albums, setAlbums] = useState<Album[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchAlbums = async () => {
      try {
        const res = await fetch("/api/gallery-albums");
        const json = await res.json();

        if (json.success) {
          setAlbums(json.data);
        }
      } catch (err) {
        console.error("Failed to load albums", err);
      } finally {
        setLoading(false);
      }
    };

    fetchAlbums();
  }, []);

  return (
    <>
      <section className="aboutinnercontainer academycontainer certifiedstudents">
        <div className="container container-xxl">
          <div className="row">
            <div className="col-12" data-aos="fade-up" data-aos-duration="700">
              <div className="section-heading mb-3 mb-xxl-4">
                <h2><span>Key Performances</span></h2>
              </div>
            </div>
          </div>

          {loading && <div className="text-center py-4"></div>}

          {!loading && albums.length === 0 && (
            <div className="text-center py-4">No albums found.</div>
          )}

          {!loading && albums.length > 0 && (
            <div className="row gx-3">
              {albums.map((album, index) => (
                <div
                  className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 mb-3"
                  key={album.id}
                  data-aos="fade-up"
                  data-aos-duration="700"
                  data-aos-delay={index * 150}
                >
                  <Link
                    href={`/history/key-performances/${album.slug}`}
                    className="certifiedstudentcar text-decoration-none"
                  >
                    <div className="certifiedimg">
                      <div className="certifiedimginner">
                        {album.cover && (
                          <Image
                            src={album.cover}
                            alt={album.title}
                            width={300}
                            height={200}
                          />
                        )}
                      </div>
                    </div>
                    <div className="certifiedcontent">
                      <p>{album.title}</p>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
    </>
  );
};

export default KeyPerformances;

















// "use client";

// import { galleryAlbums } from "@/lib/Galleryalbums";
// import Image from "next/image";
// import Link from "next/link";

// const KeyPerformances = () => {
//   return (
//     <>
//       <section className="aboutinnercontainer academycontainer certifiedstudents">
//         <div className="container container-xxl">
//           <div className="row">
//             <div className="col-12" data-aos="fade-up" data-aos-duration="700">
//               <div className="section-heading mb-3 mb-xxl-4">
//                 <h2><span>Key Performances</span></h2>
//               </div>
//             </div>
//           </div>

//           <div className="row gx-3">
//             {galleryAlbums.map((album, index) => (
//               <div
//                 className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 mb-3"
//                 key={album.slug}
//                 data-aos="fade-up"
//                 data-aos-duration="700"
//                 data-aos-delay={index * 150}
//               >
//                 <Link href={`/history/key-performances/${album.slug}`} className="certifiedstudentcar text-decoration-none">
//                   <div className="certifiedimg">
//                     <div className="certifiedimginner">
//                       <Image
//                         src={album.cover}
//                         alt={album.title}
//                         width={300}
//                         height={200}
//                       />
//                     </div>
//                   </div>
//                   <div className="certifiedcontent">
//                     <p>{album.title}</p>
//                   </div>
//                 </Link>
//               </div>
//             ))}
//           </div>
//         </div>
//       </section>
//     </>
//   );
// };

// export default KeyPerformances;