"use client"

import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"

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

export default function HotelListingItemSkeleton() {
  return (
    <article className={styles.container}>
      <SkeletonShimmer height="100%" width="100%" />
      <div className={styles.content}>
        <div className={styles.intro} style={{ width: "100%" }}>
          <SkeletonShimmer height="24px" width="100px" />
          <SkeletonShimmer height="35px" width="300px" />
          <div className={styles.captions}>
            <SkeletonShimmer height="20px" width="130px" />
            <SkeletonShimmer height="20px" width="180px" />
          </div>
        </div>
        <div style={{ width: "100%" }}>
          <SkeletonShimmer height="20px" width="95%" />
          <SkeletonShimmer height="20px" width="100%" />
          <SkeletonShimmer height="20px" width="40%" />
        </div>
        <ul className={styles.amenityList}>
          {Array.from({ length: 5 }).map((_, index) => (
            <li className={styles.amenityItem} key={index}>
              <SkeletonShimmer height="20px" width="40px" />
            </li>
          ))}
        </ul>
        <SkeletonShimmer height="40px" width="100px" />
        <Divider variant="horizontal" color="primaryLightSubtle" />
        <div className={styles.ctaWrapper}>
          <SkeletonShimmer height="45px" width="150px" />
        </div>
      </div>
    </article>
  )
}
