import SkeletonShimmer from "@/components/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>
  )
}
