"use client";

import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import SliderImage from "../../../../public/images/clinic-page-slider.jpg";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";

import LeftArrow from "../../../../public/images/doctors-left-arrow.svg";
import RightArrow from "../../../../public/images/doctors-right-arrow.svg";
import { ClinicalMachineSwiperProps } from "@/types/clinics-and-doctors";
import { getImageSrc } from "@/utils/image";

const imageSlider = [
    {
        slideImage: SliderImage
    },
    {
        slideImage: SliderImage
    },
    {
        slideImage: SliderImage
    }
]

export default function ClinicalMachineSwiper({ image_slider }: ClinicalMachineSwiperProps) {

    if (!image_slider || image_slider.length === 0) {
        return null;
    }


    return (
        <section className="mb-16 md:mb-24 xl:mb-30 bg-white">
            <div className="container">
                <div className="relative w-full">

                    {/* Desktop Navigation Arrows (Overlay Left/Right Center) */}
                    <button
                        className="machine-prev absolute left-8 top-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center cursor-pointer hover:scale-105 transition-all duration-200"
                        aria-label="Previous slide"
                    >
                        <Image src={LeftArrow} width={48} height={48} alt="Previous Arrow" />
                    </button>

                    <button
                        className="machine-next absolute right-6 top-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center cursor-pointer hover:scale-105 transition-all duration-200"
                        aria-label="Next slide"
                    >
                        <Image src={RightArrow} width={48} height={48} alt="Next Arrow" />
                    </button>

                    {/* Swiper Slider Wrapper */}
                    <div className="w-full overflow-hidden rounded-[24px]">
                        <Swiper
                            modules={[Navigation]}
                            navigation={{
                                prevEl: ".machine-prev",
                                nextEl: ".machine-next",
                            }}
                            spaceBetween={24}
                            slidesPerView={1}
                            loop={true}
                            className="w-full myClinicMachineSwiper"
                        >
                            {image_slider.map((slide, index) => {
                                const slideImgSrc = getImageSrc(slide.image);
                                if (!slideImgSrc) return null;
                                return (
                                    <SwiperSlide key={index}>
                                        <figure className="relative w-full overflow-hidden rounded-[16px]">
                                            <Image
                                                src={slideImgSrc}
                                                width={1280}
                                                height={660}
                                                className="w-full h-[545px] object-cover md:h-auto md:object-contain"
                                                alt="Clinical machinery slide"
                                            />
                                        </figure>
                                    </SwiperSlide>
                                );
                            })}
                        </Swiper>
                    </div>

                    {/* Mobile Navigation Arrows (Centered at the bottom of the slider) */}
                    <div className="flex md:hidden items-center justify-center gap-6 mt-6">
                        <button
                            className="machine-prev flex items-center justify-center cursor-pointer"
                            aria-label="Previous slide"
                        >
                            <Image src={LeftArrow} width={40} height={40} alt="Previous Arrow" />
                        </button>
                        <button
                            className="machine-next flex items-center justify-center cursor-pointer"
                            aria-label="Next slide"
                        >
                            <Image src={RightArrow} width={40} height={40} alt="Next Arrow" />
                        </button>
                    </div>

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