"use client";

import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import BlueBorderLink from '@/ui/Button/BlueBorderButton';
import { MedicalPartnersProps } from '@/types/homepage';

import 'swiper/css';

export default function MedicalPartners({ title, cta, cta_link, logos, className = "", showButton = true }: MedicalPartnersProps) {
    if (!logos || logos.length === 0) {
        return null;
    }

    // Duplicate logos for seamless infinite autoplay marquee on mobile when item count is small
    const displayLogos = logos.length < 8 ? [...logos, ...logos, ...logos, ...logos] : logos;

    return (
        <section className={`${className}`}>
            <div className="container text-center">
                {title && (
                    <p className="text-[18px] sm:text-[20px] text-[#00204F] font-normal text-center mb-8 md:mb-10 max-w-[280px] mx-auto md:max-w-none">
                        {title}
                    </p>
                )}

                {/* Desktop View: Centered aligned row with optical logo scaling */}
                <ul className="hidden md:flex flex-wrap items-center justify-center gap-8 md:gap-14 lg:gap-20 xl:gap-24 mb-11">
                    {logos.map((logo, index) => {
                        const isEscrs = logo.image?.toLowerCase().includes("escrs");
                        const logoHeightClass = isEscrs
                            ? "h-14 lg:h-16 max-h-[60px] lg:max-h-[72px] scale-110 lg:scale-125"
                            : "h-10 lg:h-12 max-h-[48px] lg:max-h-[56px]";

                        return (
                            <li key={index} className="flex items-center justify-center min-h-[60px] lg:min-h-[72px] px-2">
                                {logo.image && (
                                    <Image
                                        src={logo.image}
                                        width={160}
                                        height={72}
                                        alt="Medical partner logo"
                                        className={`w-auto object-contain transition-transform duration-300 ${logoHeightClass}`}
                                    />
                                )}
                            </li>
                        );
                    })}
                </ul>

                {/* Mobile View: Continuous Autoplay Swiper Carousel */}
                <div className="md:hidden mb-11">
                    <Swiper
                        modules={[Autoplay]}
                        slidesPerView="auto"
                        spaceBetween={32}
                        loop={true}
                        speed={4000}
                        allowTouchMove={true}
                        autoplay={{
                            delay: 0,
                            disableOnInteraction: false,
                        }}
                        className="medicalPartnersSwiper flex items-center"
                    >
                        {displayLogos.map((logo, index) => {
                            const isEscrs = logo.image?.toLowerCase().includes("escrs");
                            const mobileLogoClass = isEscrs
                                ? "h-12 max-h-[50px] scale-110"
                                : "h-9 max-h-[42px]";

                            return (
                                <SwiperSlide key={index} className="!w-auto flex items-center justify-center px-2">
                                    {logo.image && (
                                        <Image
                                            src={logo.image}
                                            width={140}
                                            height={56}
                                            alt="Medical partner logo"
                                            className={`w-auto object-contain ${mobileLogoClass}`}
                                        />
                                    )}
                                </SwiperSlide>
                            );
                        })}
                    </Swiper>
                </div>

                {showButton && cta_link && (
                    <div className="inline-block">
                        <BlueBorderLink href={cta_link}>{cta}</BlueBorderLink>
                    </div>
                )}
            </div>
        </section>
    );
}