"use client"

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

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

export 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>
          <SkeletonShimmer width="100%" height="700px" />
        </div>
      </div>
    </div>
  )
}