import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"

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

export default function MultiRoomSkeleton() {
  return (
    <div className={styles.multiRoom}>
      <div className={styles.roomName}>
        <SkeletonShimmer width="50%" height="30px" />
      </div>
      <div className={styles.roomHeader}>
        <SkeletonShimmer width="100%" height="23px" />
      </div>
      <div className={styles.multiRoomCard}>
        <div className={styles.imageContainer}>
          <SkeletonShimmer width="100%" height="100%" />
        </div>
        <div className={styles.details}>
          <div className={styles.row}>
            <SkeletonShimmer width="60px" height="23px" />
            <SkeletonShimmer width="110px" height="23px" />
          </div>
          <div className={styles.row}>
            <SkeletonShimmer width="55px" height="23px" />
            <SkeletonShimmer width="130px" height="23px" />
          </div>
          <div className={styles.row}>
            <SkeletonShimmer width="75px" height="23px" />
            <SkeletonShimmer width="155px" height="23px" />
          </div>
          <div className={styles.row}>
            <SkeletonShimmer width="75px" height="23px" />
            <SkeletonShimmer width="65px" height="23px" />
          </div>
          <Divider color="subtle" />
          <div className={styles.row}>
            <SkeletonShimmer width="150px" height="30px" />
            <SkeletonShimmer width="150px" height="30px" />
          </div>
        </div>
      </div>
    </div>
  )
}