'use client';
import { useRef } from 'react';
import type { Swiper as SwiperType } from 'swiper';
import Container from '@/components/layout/Container';
import Amenity, { type IAmenity } from './Amenity';
import SwiperElement, {
  SwiperElementProps
} from '@/components/shared/SwiperElement';



const AmenitiesCarousel = ({
  locale = 'en',
  title,
  description,
  amenities = []
}: IAmenitiesCarousel & { locale?: string }) => {
  const swiperRef = useRef<SwiperType | null>(null);

  const swiperOptions = {
    init: true,
    dir: locale === 'ar' ? 'rtl' : 'ltr',
    spaceBetween: 100,
    slidesPerView: 'auto',
    scrollbar: {
      el: '#custom-scrollbar',
      draggable: true,
      hide: false,
      dragSize: 200
    },
    onInit: (swiper: SwiperType) => {
      swiperRef.current = swiper;
    }
  } as SwiperElementProps['options'];

  return (
    <section className="mx-4 sm:mx-0">
      <Container className="rounded-xl bg-primary px-5 py-8 md:p-16 w-full overflow-hidden my-8">
        <div className="flex flex-col gap-4 ">
          <header className="text-white max-w-xl mb-6 md:mb-8">
            <h2 className="text-inherit text-2xl font-serif mb-3 md:text-4xl">
              {title}
            </h2>
            <p className="text-sm font-light md:text-base">{description}</p>
          </header>
        </div>

        {amenities?.length > 0 && (
          <div className="relative">
            <SwiperElement
              ref={swiperRef as any}
              key={locale}
              className="[&>.swiper]:overflow-visible"
              options={swiperOptions}>
              {amenities.map((amenity: IAmenity, index) => (
                <SwiperElement.Slide key={index}>
                  <Amenity
                    {...amenity}
                    index={(index + 1).toString().padStart(2, '0')}
                  />
                </SwiperElement.Slide>
              ))}
            </SwiperElement>
          </div>
        )}
      </Container>
    </section>
  );
};

export default AmenitiesCarousel;
