import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

import { RoomCardSkeleton } from "../../RoomCardSkeleton/RoomCardSkeleton"

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

type Props = {
  count?: number
}

export function SelectHotelMapSkeleton({ 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>
  )
}