"use client";
import { useId } from "react";
import Image from 'next/image';
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import 'swiper/css/pagination';
import DoctorSpecialistCard from '@/ui/card/SpecailistCard'
import LeftArrow from "../../../../public/images/doctors-left-arrow.svg"
import RightArrow from "../../../../public/images/doctors-right-arrow.svg"
import { SpecialistsProps } from '@/types/homepage';

export default function OurSpecialist({ title, heading, description, doctor_details = [], className = "" }: SpecialistsProps) {
    const uniqueId = useId().replace(/:/g, "");
    const prevBtnClass = `doctor-prev-${uniqueId}`;
    const nextBtnClass = `doctor-next-${uniqueId}`;

    if (!heading && (!doctor_details || doctor_details.length === 0)) return null;
    return (
        <section className={`${className} mb-16 md:mb-20 xl:mb-30`}>
            <div className="container overflow-visible">
                <div className="grid md:grid-cols-12 items-end mb-8 md:mb-13">
                    <div className="md:col-span-10">
                        <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[0.5px] uppercase block mb-2 md:mb-3">{title}</span>
                        <h2 className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-[1.1] mb-3 md:mb-4">{heading}</h2>
                        <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal md:max-w-[800px]">{description}</p>
                    </div>
                    <div className="md:col-span-2">
                        <div className={`hidden justify-end gap-3 ${doctor_details && doctor_details.length > 4 ? 'md:flex' : 'md:hidden'}`}>
                            <button className={`doctor-prev ${prevBtnClass} cursor-pointer`}>
                                <Image src={LeftArrow} width={48} height={48} alt="Previous Arrow" />
                            </button>
                            <button className={`doctor-next ${nextBtnClass} cursor-pointer`}>
                                <Image src={RightArrow} width={48} height={48} alt="Next Arrow" />
                            </button>
                        </div>
                    </div>

                </div>

                <Swiper
                    modules={[Navigation, Pagination]}
                    navigation={{
                        prevEl: `.${prevBtnClass}`,
                        nextEl: `.${nextBtnClass}`,
                    }}
                    pagination={{ clickable: true }}

                    breakpoints={{
                        0: {
                            slidesPerView: 1.2,
                            spaceBetween: 16,
                        },

                        640: {
                            slidesPerView: 2,
                            spaceBetween: 20,
                        },

                        768: {
                            slidesPerView: 2.1,
                            spaceBetween: 24,
                        },

                        1024: {
                            slidesPerView: 3,
                            spaceBetween: 24,
                        },

                        1240: {
                            slidesPerView: 4,
                            spaceBetween: 40,
                        },
                    }}

                    className="myDoctorSwiper !pb-4"
                >
                    {
                        doctor_details?.map((SpecailistCardItem, index) =>
                            <SwiperSlide key={index} className="!h-auto flex flex-col">
                                <DoctorSpecialistCard
                                    doctorImage={SpecailistCardItem.image}
                                    doctorName={SpecailistCardItem.name}
                                    doctorSpeciality={SpecailistCardItem.description}
                                    doctorDepartment={SpecailistCardItem.specialisation}
                                    className="w-full flex-1"
                                />
                            </SwiperSlide>
                        )
                    }
                </Swiper>

                {/* //arrows for mobile */}
                <div className="md:hidden flex justify-center gap-4 mt-6">

                    <button
                        className={`mobile-doctor-prev doctor-prev ${prevBtnClass} cursor-pointer`}
                    >
                        <Image
                            src={LeftArrow}
                            width={32}
                            height={32}
                            alt="Previous Arrow"
                        />
                    </button>


                    <button
                        className={`mobile-doctor-next doctor-next ${nextBtnClass} cursor-pointer`}
                    >
                        <Image
                            src={RightArrow}
                            width={32}
                            height={32}
                            alt="Next Arrow"
                        />
                    </button>

                </div>
            </div>
        </section>
    )
}