"use client";

import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
import { ClinicEquipmentsProps } from "@/types/clinic-buelle";

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

export default function ClinicEquipments({ heading, description, equipment_details }: ClinicEquipmentsProps) {
    return (
        <section className="mb-16 md:mb-24 xl:mb-30 overflow-hidden">
            {/* Centered Header Section inside standard container limits */}
            <div className="container">
                <div className="grid grid-cols-12 gap-y-4 text-center justify-center mb-10 md:mb-16">
                    <div className="col-span-12 max-w-[800px] mx-auto">
                        <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-semibold leading-[1.2] tracking-[-0.5px] max-w-[630px] mx-auto mb-4">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-relaxed">
                            {description}
                        </p>
                    </div>
                </div>
            </div>

            {/* Full-width Swiper Slider Wrapper (extends end-to-end to viewport edges) */}
            <div className="relative w-full">
                <Swiper
                    modules={[Pagination]}
                    pagination={{
                        clickable: true,
                        el: ".equipments-pagination",
                    }}
                    centeredSlides={true}
                    initialSlide={1}
                    slideToClickedSlide={true}
                    className="myClinicEquipmentsSwiper w-full pb-10"
                    breakpoints={{
                        320: {
                            slidesPerView: 1.2,
                            spaceBetween: 16,
                        },
                        640: {
                            slidesPerView: 1.5,
                            spaceBetween: 24,
                        },
                        1024: {
                            slidesPerView: 1.8,
                            spaceBetween: 32,
                        },
                        1280: {
                            slidesPerView: 2.1,
                            spaceBetween: 40,
                        },
                    }}
                >
                    {equipment_details?.map((card, index) => {
                        const cardTitle = card?.title?.trim() || "Femto Laser";
                        const cardSubtitle = card?.subtitle?.trim() || "Non-invasive retinal & choroidal vascular imaging";

                        return (
                            <SwiperSlide key={index} className="h-auto">
                                {({ isActive }) => (
                                    <article className="flex flex-col h-full text-center group cursor-pointer">
                                        {/* Image container with rounded corners and border highlight on active centered slide */}
                                        <figure
                                            className={`relative aspect-[3/4] md:aspect-[1.33/1] w-full overflow-hidden rounded-[24px] bg-[#F8FAFC] transition-all duration-300`}
                                        >
                                            <Image
                                                src={card.image}
                                                alt={cardTitle}
                                                fill
                                                className="object-cover transition-transform duration-500 group-hover:scale-103"
                                                sizes="(max-width: 768px) 80vw, (max-width: 1280px) 50vw, 33vw"
                                            />
                                        </figure>

                                        {/* Text content details below the image */}
                                        <div className="pt-5 pb-2 px-2">
                                            <h3 className="text-[18px] md:text-[20px] font-bold text-[#00204F] mb-2 leading-tight">
                                                {cardTitle}
                                            </h3>
                                            <p className="text-[14px] md:text-[15px] text-[#334D72] leading-relaxed max-w-[280px] mx-auto">
                                                {cardSubtitle}
                                            </p>
                                        </div>
                                    </article>
                                )}
                            </SwiperSlide>
                        );
                    })}
                </Swiper>

                {/* Pagination Container (Visible on mobile/tablet, hidden on desktop via CSS and container class) */}
                <div className="equipments-pagination flex md:hidden justify-center items-center gap-2 mt-4"></div>
            </div>
        </section>
    );
}