'use client';

import s from './styles.module.scss';

import Image from 'next/image';
import { StaticImport } from 'next/dist/shared/lib/get-img-props';
import { clsx } from 'clsx';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Grid } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/grid';

type LicenseSliderProps = {
  className?: string;
  images: {
    id: string;
    name: string;
    image: string | StaticImport;
    fullSizeImage: string;
  }[];
};

const mockFullSizeImage = 'images/empty-image.jpg';

const swiperBreakpoints = {
  360: {
    slidesPerView: 1,
    spaceBetween: 10,
  },
  768: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
  1024: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
  1440: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
};

export default function Ui({ className, images }: LicenseSliderProps) {
  return (
    <Swiper
      className={clsx(s.Slider, className)}
      modules={[Grid]}
      breakpoints={swiperBreakpoints}
    >
      {images.map(({ id, name, image, fullSizeImage }) => (
        <SwiperSlide key={id} className={s.Slide}>
          <a href={fullSizeImage} target='_blank'>
            <Image className={s.Image} src={image} alt={name} quality={75} />
          </a>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}
