web/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.tsx

import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

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

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

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