'use client'
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/pagination'
import { Pagination } from 'swiper/modules'
import Image from 'next/image'
import { urlFor } from '@/config/sanity'

function RoomImagSlider({ images }: { images: any[] }) {
  return (
    <div className="room-images mb-2">
      <Swiper
        spaceBetween={10}
        slidesPerView={1}
        pagination={{ clickable: true }}
        modules={[Pagination]}
      >
        {images?.map((image: any) => (
          <SwiperSlide key={image._key}>
            <Image
              height={500}
              width={500}
              src={urlFor(image)?.toString()}
              alt={'rooms'}
              className="w-full h-auto rounded-lg shadow-lg"
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}

export default RoomImagSlider