"use client";

import { useState } from "react";
import type { Swiper as SwiperType } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import ArrowForwardOutlinedIcon from '@mui/icons-material/ArrowForwardOutlined';
import ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';

import "swiper/css";
import "swiper/css/navigation";
import ImageFallback from "@/src/components/custom-components/image-fallback";

export default function AboutCarousel({ aboutUs }: { aboutUs: any }) {
    const [swiperInstance, setSwiperInstance] = useState<SwiperType | null>(null);

    const baseUrl = process.env.NEXT_PUBLIC_API_IMAGE_URL;

    const images = aboutUs?.filter((item: any) => item?.imageUrl) ?? [];

    const initialSlideIndex = 0;

    return (
        <section className="w-full bg-white py-6 overflow-hidden">
            <div className="relative w-full mx-auto px-4">
                <Swiper
                    modules={[Navigation]}
                    onSwiper={setSwiperInstance}
                    centeredSlides={false}
                    initialSlide={initialSlideIndex}
                    loop={images.length > 1}
                    grabCursor
                    spaceBetween={24}
                    slidesPerView={1.9}
                    breakpoints={{
                        0: {
                            slidesPerView: 1.2,
                            spaceBetween: 16,
                        },
                        640: {
                            slidesPerView: 1.5,
                            spaceBetween: 20,
                        },
                        1024: {
                            slidesPerView: 1.9,
                            spaceBetween: 28,
                        },
                    }}
                    className="w-full"
                >
                    {images?.map((img: any, index: any) => (
                        <SwiperSlide key={index}>
                            <div className="relative h-[440px] sm:h-[540px] lg:h-[620px] w-full overflow-hidden">
                                <ImageFallback
                                    src={`${baseUrl}${img?.imageUrl}`}
                                    alt={`Gallery ${index + 1}`}
                                    fill
                                    sizes="(max-width: 768px) 100vw, 60vw"
                                    className="object-cover transition-transform duration-500 hover:scale-105"
                                />
                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>

                {/* Custom Navigation Buttons with direct Swiper actions */}
                <button
                    onClick={() => swiperInstance?.slidePrev()}
                    className="absolute left-4 sm:left-10 lg:left-99 top-1/2 z-30 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full cursor-pointer"
                    aria-label="Previous slide"
                    type="button"
                >
                    <ArrowBackOutlinedIcon sx={{ color: "#000000", fontSize: 34 }} />
                </button>

                <button
                    onClick={() => swiperInstance?.slideNext()}
                    className="absolute right-4 sm:right-10 lg:right-99 top-1/2 z-30 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full cursor-pointer"
                    aria-label="Next slide"
                    type="button"
                >
                    <ArrowForwardOutlinedIcon sx={{ color: "#000000", fontSize: 34 }} />
                </button>
            </div>
        </section>
    );
}