"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import axiosInstance from "@/lib/axiosInstance";

interface StudentSuccessItem {
  id: string;
  title: string;
  image: string | null;
  content_html: string | null;
  sort_order: number | null;
  status: boolean | null;
}

const StudentSuccess = () => {
  const [items, setItems] = useState<StudentSuccessItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchStudentSuccess = async () => {
      try {
        const response = await axiosInstance.get("/cms/student-success?page_id=1");
        const result = await response.data;

        if (result.success) {
          setItems(result.data || []);
        }
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchStudentSuccess();
  }, []);

  if (loading || items.length === 0) return null;

  return (
    <section className="studentcontainer pt-0">
      <div className="container container-xxl">
        <div className="row">
          <div className="col-12">
            <div
              className="section-heading text-center"
              data-aos="fade-up"
              data-aos-duration="700"
            >
              <h2>
                <span>Student Success</span>
              </h2>
            </div>
          </div>
        </div>

        <div className="row">
          <div
            className="col-12 position-relative"
            data-aos="fade-up"
            data-aos-duration="800"
          >
            <Swiper
              id="StudentSuccess"
              className="swiper"
              modules={[Navigation]}
              loop={items.length > 3}
              speed={1000}
              spaceBetween={20}
              slidesPerView={1}
              navigation={{
                prevEl: ".swiper-button-prev-student-success",
                nextEl: ".swiper-button-next-student-success",
                addIcons: false,
              }}
              breakpoints={{
                576: {
                  slidesPerView: 2,
                  spaceBetween: 20,
                },
                992: {
                  slidesPerView: 3,
                  spaceBetween: 20,
                },
              }}
            >
              {items.map((item) => (
                <SwiperSlide key={item.id} className="swiper-slide">
                  
                  <a  href="javascript:void(0);"
                    className="studentsuccesbx"
                  >
                    {item.image && (
                       <img
                        src={item.image}
                        width={372}
                        height={329}
                        alt={item.title}
                      />
                    )}

                    <div className="studentovarlay">
                      <h3>{item.title}</h3>
                    </div>
                  </a>
                </SwiperSlide>
              ))}
            </Swiper>

            <div className="swiper-nav mt-0">
              <div className="swiper-button-prev swiper-button-prev-student-success"></div>
              <div className="swiper-button-next swiper-button-next-student-success"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default StudentSuccess;


// "use client";

// import Image from "next/image";
// import { Swiper, SwiperSlide } from "swiper/react";
// import { Navigation } from "swiper/modules";

// import "swiper/css";
// import "swiper/css/navigation";

// import StudentImg1 from "@/images/student-img-1.webp";
// import StudentImg2 from "@/images/student-img-2.webp";
// import StudentImg3 from "@/images/student-img-3.webp";

// const StudentSuccess = () => {
//   return (
//     <section className="studentcontainer pt-0">
//       <div className="container container-xxl">
//         <div className="row">
//           <div className="col-12">
//             <div
//               className="section-heading text-center"
//               data-aos="fade-up"
//               data-aos-duration="700"
//             >
//               <h2>
//                 <span>Student Success</span>
//               </h2>
//             </div>
//           </div>
//         </div>

//         <div className="row">
//           <div
//             className="col-12 position-relative"
//             data-aos="fade-up"
//             data-aos-duration="800"
//           >
//             <Swiper
//               id="StudentSuccess"
//               className="swiper"
//               modules={[Navigation]}
//               loop={true}
//               speed={1000}
//               spaceBetween={20}
//               slidesPerView={1}
//               navigation={{
//                 prevEl: ".swiper-button-prev-student-success",
//                 nextEl: ".swiper-button-next-student-success",
//                 addIcons: false,
//               }}
//               breakpoints={{
//                 576: {
//                   slidesPerView: 2,
//                   spaceBetween: 20,
//                 },
//                 992: {
//                   slidesPerView: 3,
//                   spaceBetween: 20,
//                 },
//               }}
//             >
//               <SwiperSlide className="swiper-slide">
//                 <a
//                   href="javascript:void(0);"
//                   className="studentsuccesbx"
//                 >
//                   <Image
//                     src={StudentImg1}
//                     width={372}
//                     height={329}
//                     alt=""
//                   />
//                   <div className="studentovarlay">
//                     <h3>Arangetram Ceremonies</h3>
//                   </div>
//                 </a>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <a
//                   href="javascript:void(0);"
//                   className="studentsuccesbx"
//                 >
//                   <Image
//                     src={StudentImg2}
//                     width={372}
//                     height={329}
//                     alt=""
//                   />
//                   <div className="studentovarlay">
//                     <h3>Awards &amp; Certificates</h3>
//                   </div>
//                 </a>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <a
//                   href="javascript:void(0);"
//                   className="studentsuccesbx"
//                 >
//                   <Image
//                     src={StudentImg3}
//                     width={372}
//                     height={329}
//                     alt=""
//                   />
//                   <div className="studentovarlay">
//                     <h3>Competition Winners</h3>
//                   </div>
//                 </a>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <a
//                   href="javascript:void(0);"
//                   className="studentsuccesbx"
//                 >
//                   <Image
//                     src={StudentImg1}
//                     width={372}
//                     height={329}
//                     alt=""
//                   />
//                   <div className="studentovarlay">
//                     <h3>Arangetram Ceremonies</h3>
//                   </div>
//                 </a>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <a
//                   href="javascript:void(0);"
//                   className="studentsuccesbx"
//                 >
//                   <Image
//                     src={StudentImg2}
//                     width={372}
//                     height={329}
//                     alt=""
//                   />
//                   <div className="studentovarlay">
//                     <h3>Awards &amp; Certificates</h3>
//                   </div>
//                 </a>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <a
//                   href="javascript:void(0);"
//                   className="studentsuccesbx"
//                 >
//                   <Image
//                     src={StudentImg3}
//                     width={372}
//                     height={329}
//                     alt=""
//                   />
//                   <div className="studentovarlay">
//                     <h3>Competition Winners</h3>
//                   </div>
//                 </a>
//               </SwiperSlide>
//             </Swiper>

//             <div className="swiper-nav mt-0">
//               <div className="swiper-button-prev swiper-button-prev-student-success"></div>
//               <div className="swiper-button-next swiper-button-next-student-success"></div>
//             </div>
//           </div>
//         </div>
//       </div>
//     </section>
//   );
// };

// export default StudentSuccess;