import SkeletonShimmer from "@/components/SkeletonShimmer"

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

export async function MyStaySkeleton() {
  return (
    <div className={styles.content}>
      <div className={styles.headerSkeleton}>
        <SkeletonShimmer width={"100px"} height="20px" />
        <SkeletonShimmer width={"450px"} height="50px" />
        <SkeletonShimmer width={"200px"} height="30px" />
      </div>
      <div className={styles.cardSkeleton}>
        <SkeletonShimmer width="590px" height="380px" />
      </div>
      <div className={styles.section}>
        <SkeletonShimmer width={"200px"} height="30px" />
        <div className={styles.ancillariesSkeleton}>
          <SkeletonShimmer width="280px" height="200px" />
          <SkeletonShimmer width="280px" height="200px" />
          <SkeletonShimmer width="280px" height="200px" />
          <SkeletonShimmer width="280px" height="200px" />
          <SkeletonShimmer width="280px" height="200px" />
        </div>
      </div>
      <div className={styles.section}>
        <SkeletonShimmer width={"200px"} height="30px" />
        <div className={styles.roomSkeleton}>
          <SkeletonShimmer width="100%" height="700px" />
        </div>
      </div>
    </div>
  )
}