import SkeletonShimmer from '../SkeletonShimmer'

import styles from './HotelCardSkeleton.module.css'

export function HotelCardSkeleton() {
  return (
    <article className={styles.card}>
      {/* image container */}
      <div className={styles.imageContainer}>
        <SkeletonShimmer width="100%" height="100%" />
      </div>

      <div className={styles.content}>
        <SkeletonShimmer height="65px" />
        <div className={styles.text}>
          <SkeletonShimmer height="20px" />
          <SkeletonShimmer height="20px" />
          <SkeletonShimmer height="20px" />
          <SkeletonShimmer height="20px" />
        </div>
        <SkeletonShimmer height="56px" />
        <SkeletonShimmer height="52px" width="150px" />
      </div>

      <div className={styles.priceVariants}>
        {/* price variants */}
        {Array.from({ length: 2 }).map((_, index) => (
          <SkeletonShimmer key={index} height="100px" />
        ))}
        <SkeletonShimmer height="40px" />
      </div>
    </article>
  )
}