import SkeletonShimmer from "@/components/SkeletonShimmer"

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

export default function LinkedReservationSkeleton() {
  return (
    <div className={styles.linkedReservation}>
      <div className={styles.title}>
        <div
          className={styles.skeleton}
          style={{ width: "100px", height: "24px" }}
        >
          <SkeletonShimmer width="100px" height="24px" />
        </div>
      </div>
      <div className={styles.details}>
        <div
          className={styles.skeleton}
          style={{ width: "200px", height: "18px" }}
        >
          <SkeletonShimmer width="200px" height="18px" />
        </div>
        <div className={styles.guests}>
          <div
            className={styles.skeleton}
            style={{ width: "150px", height: "18px" }}
          >
            <SkeletonShimmer width="150px" height="18px" />
          </div>
        </div>
      </div>
      <div className={styles.dates}>
        <div className={styles.date}>
          <div
            className={styles.skeleton}
            style={{ width: "80px", height: "18px" }}
          >
            <SkeletonShimmer width="80px" height="18px" />
          </div>
          <div
            className={styles.skeleton}
            style={{ width: "160px", height: "18px" }}
          >
            <SkeletonShimmer width="160px" height="18px" />
          </div>
        </div>
        <div className={styles.date}>
          <div
            className={styles.skeleton}
            style={{ width: "80px", height: "18px" }}
          >
            <SkeletonShimmer width="80px" height="18px" />
          </div>
          <div
            className={styles.skeleton}
            style={{ width: "160px", height: "18px" }}
          >
            <SkeletonShimmer width="160px" height="18px" />
          </div>
        </div>
      </div>
    </div>
  )
}