carousel.tsx

'use client';

import { Swiper, SwiperSlide } from 'swiper/react';
import {
  Autoplay,
  Navigation,
  Pagination,
  A11y,
  Keyboard,
} from 'swiper/modules';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import 'swiper/css';
import Image from 'next/image';

import slide1 from './slide-1.png';
import slide2 from './slide-2.png';
import slide3 from './slide-3.png';
import slide4 from './slide-4.png';
import slide5 from './slide-5.png';
import { useId } from 'react';
import { cn } from '@/app/lib/utils';

export default function CarouselWidget() {
  const items = [slide1, slide2, slide3, slide4, slide5];
  const id = useId().replaceAll(':', '');

  return (
    <div>
      <Swiper
        modules={[Autoplay, Keyboard, Pagination, Navigation, A11y]}
        spaceBetween={20}
        keyboard={{
          enabled: true,
        }}
        navigation={{
          nextEl: '#swiper-button-next',
          prevEl: '#swiper-button-prev',
        }}
        pagination={{
          clickable: true,
          el: `#swiper-pagination-${id}`,
          renderBullet(i, className) {
            return `<button class="${className} aria-[current]:bg-primary w-2 h-2 bg-muted inline-block rounded-full"></button>`;
          },
        }}
        slidesPerView={1.5}
        autoplay={{
          pauseOnMouseEnter: true,
        }}
        loop
        centeredSlides={true}
        className={cn('relative ', !ready && 'opacity-0')}
      >
        {items.map((image, i) => (
          <SwiperSlide
            key={`slide-${i}`}
            className="relative shadow aspect-video overflow-hidden border rounded-lg"
          >
            <Image
              className="object-cover"
              fill
              src={image}
              key={`slide-${i + 1}`}
              alt=""
            />
          </SwiperSlide>
        ))}

        <button
          id="swiper-button-prev"
          className="absolute z-10 w-10 h-10 grid place-content-center top-1/2 left-0 -translate-y-1/2"
        >
          <ChevronLeft size={32} />
          <span className="sr-only">Prev</span>
        </button>
        <button
          id="swiper-button-next"
          className="absolute z-10 w-10 h-10 grid place-content-center top-1/2 right-0 -translate-y-1/2"
        >
          <ChevronRight size={32} />
          <span className="sr-only">Next</span>
        </button>
      </Swiper>

      <div
        id={`swiper-pagination-${id}`}
        className="mt-4 flex items-center gap-2 justify-center"
      />
    </div>
  );
}