import React from 'react'
import { type SwiperProps, type SwiperRef, SwiperSlide } from 'swiper/react'
import { cn } from '@/libs/cn'
import { isAboveBreakpoint } from '@/libs/breakpoint'
import { SimpleSwiper } from './SimpleSwiper'

export type MediaSwiperProps = SwiperProps & {
  images: ImportAttributes[]
  imageClassName?: string
  slideClassName?: string
}

const isMd = isAboveBreakpoint('MD')

export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
  ({ images, className, slideClassName, imageClassName, ...otherProps }, ref) => {
    return (
      <SimpleSwiper
        ref={ref}
        slidesPerView={1}
        freeMode={false}
        mousewheel={false}
        navigation={isMd}
        pagination={{
          type: 'fraction',
        }}
        loop={true}
        watchSlidesProgress={true}
        style={{ overflow: 'hidden' }}
        className={cn('w-full rounded-3xl', className)}
        {...otherProps}
      >
        {images.map((image, index) => (
          <SwiperSlide key={index} className={slideClassName}>
            <img
              {...image}
              loading={index === 0 ? 'eager' : 'lazy'}
              decoding="async"
              fetchPriority={index === 0 ? 'high' : 'auto'}
              className={cn(
                'aspect-video w-full rounded-3xl object-cover object-center',
                imageClassName
              )}
            />
            <div className="swiper-lazy-preloader border-brand"></div>
          </SwiperSlide>
        ))}
      </SimpleSwiper>
    )
  }
)
MediaSwiper.displayName = 'SimpleSwiper'