"use client"

import SkeletonShimmer from "@/components/SkeletonShimmer"

import HotelListingItemSkeleton from "./HotelListingItem/HotelListingItemSkeleton"

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

export default function HotelListingSkeleton() {
  return (
    <section className={styles.container}>
      <div className={styles.listHeader}>
        <SkeletonShimmer height="30px" width="300px" />
        <SkeletonShimmer height="30px" width="100px" />
      </div>
      <ul className={styles.hotelList}>
        {Array.from({ length: 3 }).map((_, index) => (
          <li key={index}>
            <HotelListingItemSkeleton />
          </li>
        ))}
      </ul>
    </section>
  )
}
