import SkeletonShimmer from "@/components/SkeletonShimmer"

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

export function LinkedReservationCardSkeleton() {
  return (
    <div className={styles.card}>
      <div className={styles.content}>
        <div className={styles.img}>
          <SkeletonShimmer height={"204px"} width={"100%"} />
        </div>
        <div className={styles.roomDetails}>
          <div className={styles.roomName}>
            <SkeletonShimmer height={"24px"} width={"130px"} />
            <SkeletonShimmer height={"20px"} width={"140px"} />
          </div>
          <div className={styles.details}>
            <SkeletonShimmer height={"20px"} width={"300px"} />
            <SkeletonShimmer height={"20px"} width={"300px"} />
            <SkeletonShimmer height={"20px"} width={"300px"} />
            <SkeletonShimmer height={"20px"} width={"300px"} />
          </div>
          <div className={styles.guest}>
            <SkeletonShimmer height={"20px"} width={"100px"} />
            <SkeletonShimmer height={"20px"} width={"200px"} />
            <SkeletonShimmer height={"20px"} width={"150px"} />
            <SkeletonShimmer height={"20px"} width={"300px"} />
          </div>
        </div>
      </div>
    </div>
  )
}