import { getAllRooms } from '@/action'
import RoomComponent from '@/components/manual/room'
import { urlFor } from '@/config/sanity'
import { RoomType } from '@/global'
import React, { Suspense } from 'react'
import LoadingSpinner from '../loading'

async function Page() {
  const { rooms } = await getAllRooms()
  if (rooms?.length < 1) return <p>No available rooms</p>
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <div className="flex flex-wrap">
        {rooms?.map((item: RoomType) => {
          return (
            <RoomComponent
              key={item?._id}
              imageUrl={urlFor(item?.images[0])?.toString()}
              imageAlt={item?.roomType}
              supTitle={''}
              title={item?.roomType}
              summary={item?.description.substring(0, 100) + '...'}
              readMoreLink={`rooms/${item?._id}`}
              bookNowLink={`rooms/${item?._id}/booking`}
            />
          )
        })}
      </div>
    </Suspense>
  )
}

export default Page