"use client"

import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"

import HotelListingItemSkeleton from "./HotelListingItem/HotelListingItemSkeleton"

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

export default function CampaignHotelListingSkeleton() {
  return (
    <section className={styles.hotelListingSection}>
      <header className={styles.header}>
        <Typography variant="Title/md">
          <SkeletonShimmer width="40ch" />
        </Typography>
      </header>
      <ul className={styles.list}>
        {Array.from({ length: 3 }).map((_, index) => (
          <li key={index} className={styles.listItem}>
            <HotelListingItemSkeleton />
          </li>
        ))}
      </ul>
    </section>
  )
}