"use client"

import SkeletonShimmer from "@/components/SkeletonShimmer"

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

export default function HotelListItemSkeleton() {
  return (
    <article className={styles.hotelListItem}>
      <div className={styles.imageWrapper}>
        <SkeletonShimmer width="100%" height="100%" />
      </div>
      <div className={styles.content}>
        <div className={styles.intro}>
          <div className={styles.logo}>
            <SkeletonShimmer height="24px" width="100px" />
          </div>
          <SkeletonShimmer height="35px" width="300px" />
          <div className={styles.captions}>
            <SkeletonShimmer height="20px" width="130px" />
            <SkeletonShimmer height="20px" width="180px" />
          </div>
        </div>
        <ul className={styles.amenityList}>
          {Array.from({ length: 5 }).map((_, index) => (
            <li className={styles.amenityItem} key={index}>
              <SkeletonShimmer height="20px" width="40px" />
            </li>
          ))}
        </ul>
        <div className={styles.ctaWrapper}>
          <SkeletonShimmer height="45px" width="100%" />
        </div>
      </div>
    </article>
  )
}
