"use client";

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

import Swiper from "swiper";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import axiosInstance from "@/lib/axiosInstance";

interface Moment {
  id: number;
  title: string;
  image: string;
  content_html?: string;
  sort_order?: number;
}

Swiper.use([Navigation]);

const ABOUT_PAGE_ID = "2";

const MomentsFromRKDAVideo = () => {
const [moments, setMoments] = useState<Moment[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMoments = async () => {
      try {
        setLoading(true);

        const response = await axiosInstance.get(
          `/cms/moments?page_id=${ABOUT_PAGE_ID}`
        );

        if (response.data.success) {
          setMoments(response.data.data || []);
        }
      } catch (error) {
        console.error("Failed to fetch moments:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchMoments();
  }, []);

  useEffect(() => {
    if (loading || moments.length === 0) return;

    const swiper = new Swiper("#OurPerformances", {
      autoplay: false,
      speed: 700,
      slidesPerView: 1,
      loop: false,
      spaceBetween: 15,

      navigation: {
        nextEl: ".swiper-button-next-our-performances",
        prevEl: ".swiper-button-prev-our-performances",
        addIcons: false,
      },

      breakpoints: {
        100: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
        260: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
        370: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
        440: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
        574: {
          slidesPerView: 2,
          spaceBetween: 12,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 15,
        },
        992: {
          slidesPerView: 3,
          spaceBetween: 15,
        },
        1200: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
        1400: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
        1700: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
      },
    });

    return () => swiper.destroy(true, true);
  }, [loading, moments]);

  if (loading || moments.length === 0) {
    return null;
  }

  return (
    <section className="momentcontainer pt-0">
      <div className="container container-xxl">
        <div className="row">
          <div className="col-12">
            <div className="section-heading text-center mb-1 mb-md-3">
              <h2>
                <span>Moments From RKDA.</span>
              </h2>
            </div>
          </div>
        </div>

        <div className="row">
          <div
            className="col-12 position-relative"
            data-aos="fade-up"
            data-aos-duration="800"
          >
            <div id="OurPerformances" className="swiper">
              <div className="swiper-wrapper">
                {moments.map((moment) => (
                  <div className="swiper-slide" key={moment.id}>
                    <div className="videobtx">
                      <div className="videobtxinner">
                        {moment.image ? (
                          <Image
                            src={moment.image}
                            width={364}
                            height={222}
                            alt={moment.title}
                          />
                        ) : (
                          <div
                            style={{
                              width: 364,
                              height: 222,
                              background: "#eee",
                            }}
                          />
                        )}

                        <div className="videooverlay">
                          <h3>{moment.title}</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="swiper-nav primary-nav mt-0">
              <div className="swiper-button-prev swiper-button-prev-our-performances"></div>
              <div className="swiper-button-next swiper-button-next-our-performances"></div>
            </div>
          </div>

          <div className="col-12">
            <div className="freevirtualclass text-center border-0 m-0 pt-4">
              <a href="javascript:void(0);" className="theme-btn border-0">
                View Full Gallery
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default MomentsFromRKDAVideo;


// "use client";

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

// import Swiper from "swiper";
// import { Navigation } from "swiper/modules";
// import "swiper/css";
// import "swiper/css/navigation";

// import MomentImg1 from "@/images/moment-img-1.webp";
// import MomentImg2 from "@/images/moment-img-2.webp";
// import MomentImg3 from "@/images/moment-img-3.webp";

// Swiper.use([Navigation]);

// const MomentsFromRKDAVideo = () => {
//   useEffect(() => {
//     const swiper = new Swiper("#OurPerformances", {
//       autoplay: false,
//       speed: 700,
//       slidesPerView: 1,
//       loop: false,
//       spaceBetween: 15,

//       navigation: {
//         nextEl: ".swiper-button-next-our-performances",
//         prevEl: ".swiper-button-prev-our-performances",
//         addIcons: false
//       },

//       breakpoints: {
//         100: {
//           slidesPerView: 1,
//           spaceBetween: 0,
//         },
//         260: {
//           slidesPerView: 1,
//           spaceBetween: 0,
//         },
//         370: {
//           slidesPerView: 1,
//           spaceBetween: 0,
//         },
//         440: {
//           slidesPerView: 1,
//           spaceBetween: 0,
//         },
//         574: {
//           slidesPerView: 2,
//           spaceBetween: 12,
//         },
//         768: {
//           slidesPerView: 2,
//           spaceBetween: 15,
//         },
//         992: {
//           slidesPerView: 3,
//           spaceBetween: 15,
//         },
//         1200: {
//           slidesPerView: 3,
//           spaceBetween: 20,
//         },
//         1400: {
//           slidesPerView: 3,
//           spaceBetween: 20,
//         },
//         1700: {
//           slidesPerView: 3,
//           spaceBetween: 20,
//         },
//       },
//     });

//     return () => swiper.destroy(true, true);
//   }, []);

//   return (
//     <section className="momentcontainer pt-0">
//       <div className="container container-xxl">
//         <div className="row">
//           <div className="col-12">
//             <div className="section-heading text-center mb-1 mb-md-3">
//               <h2>
//                 <span>Moments From RKDA.</span>
//               </h2>
//             </div>
//           </div>
//         </div>

//         <div className="row">
//           <div
//             className="col-12 position-relative"
//             data-aos="fade-up"
//             data-aos-duration="800"
//           >
//             <div id="OurPerformances" className="swiper">
//               <div className="swiper-wrapper">
//                 <div className="swiper-slide">
//                   <div className="videobtx">
//                     <div className="videobtxinner">
//                       <Image
//                         src={MomentImg1}
//                         width={364}
//                         height={222}
//                         alt="Kuchipudi Ballet Showcase"
//                       />

//                       <div className="videooverlay">
//                         <h3>Kuchipudi Ballet Showcase</h3>
//                       </div>
//                     </div>
//                   </div>
//                 </div>

//                 <div className="swiper-slide">
//                   <div className="videobtx">
//                     <div className="videobtxinner">
//                       <Image
//                         src={MomentImg2}
//                         width={364}
//                         height={222}
//                         alt="Traditional Dance Recital"
//                       />

//                       <div className="videooverlay">
//                         <h3>Traditional Dance Recital</h3>
//                       </div>
//                     </div>
//                   </div>
//                 </div>

//                 <div className="swiper-slide">
//                   <div className="videobtx">
//                     <div className="videobtxinner">
//                       <Image
//                         src={MomentImg3}
//                         width={364}
//                         height={222}
//                         alt="Kuchipudi Showcase"
//                       />

//                       <div className="videooverlay">
//                         <h3>Kuchipudi Showcase</h3>
//                       </div>
//                     </div>
//                   </div>
//                 </div>

//                 <div className="swiper-slide">
//                   <div className="videobtx">
//                     <div className="videobtxinner">
//                       <Image
//                         src={MomentImg1}
//                         width={364}
//                         height={222}
//                         alt="Kuchipudi Ballet Showcase"
//                       />

//                       <div className="videooverlay">
//                         <h3>Kuchipudi Ballet Showcase</h3>
//                       </div>
//                     </div>
//                   </div>
//                 </div>

//                 <div className="swiper-slide">
//                   <div className="videobtx">
//                     <div className="videobtxinner">
//                       <Image
//                         src={MomentImg2}
//                         width={364}
//                         height={222}
//                         alt="Traditional Dance Recital"
//                       />

//                       <div className="videooverlay">
//                         <h3>Traditional Dance Recital</h3>
//                       </div>
//                     </div>
//                   </div>
//                 </div>

//                 <div className="swiper-slide">
//                   <div className="videobtx">
//                     <div className="videobtxinner">
//                       <Image
//                         src={MomentImg3}
//                         width={364}
//                         height={222}
//                         alt="Kuchipudi Showcase"
//                       />

//                       <div className="videooverlay">
//                         <h3>Kuchipudi Showcase</h3>
//                       </div>
//                     </div>
//                   </div>
//                 </div>
//               </div>
//             </div>

//             <div className="swiper-nav primary-nav mt-0">
//               <div className="swiper-button-prev swiper-button-prev-our-performances"></div>
//               <div className="swiper-button-next swiper-button-next-our-performances"></div>
//             </div>
//           </div>

//           <div className="col-12">
//             <div className="freevirtualclass text-center border-0 m-0 pt-4">
//               <a href="javascript:void(0);" className="theme-btn border-0">
//                 View Full Gallery
//               </a>
//             </div>
//           </div>
//         </div>
//       </div>
//     </section>
//   );
// };

// export default MomentsFromRKDAVideo;