import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
import SkeletonShimmer from "@/components/SkeletonShimmer"

import styles from "./SelectHotelMapContainerSkeleton.module.css"

type Props = {
  count?: number
}

export function SelectHotelMapContainerSkeleton({ count = 2 }: Props) {
  return (
    <div className={styles.container}>
      <div className={styles.listingContainer}>
        <div className={styles.skeletonContainer}>
          {Array.from({ length: count }).map((_, index) => (
            <div key={index} className={styles.skeletonItem}>
              <RoomCardSkeleton />
            </div>
          ))}
        </div>
      </div>
      <div className={styles.mapContainer}>
        <SkeletonShimmer width={"100%"} height="100%" />
      </div>
    </div>
  )
}