import { HotelCardSkeleton } from "@scandic-hotels/design-system/HotelCard/HotelCardSkeleton"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

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

type Props = {
  count?: number
}

export function SelectHotelSkeleton({ count = 4 }: Props) {
  return (
    <div className={styles.skeletonContainer}>
      <header className={styles.header}>
        <div className={styles.headerContent}>
          <div className={styles.title}>
            <div className={styles.cityInformation}>
              <SkeletonShimmer height="25px" width="200px" />
            </div>
            <div className={styles.sorter}>
              <SkeletonShimmer height="60px" width="100%" />
            </div>
          </div>
        </div>
      </header>
      <main className={styles.main}>
        <div className={styles.availabilityContainer}>
          <div className={styles.sideBar}>
            <div className={styles.sideBarItem}>
              <SkeletonShimmer height="280px" width="340px" />
            </div>
            <div className={styles.sideBarItem}>
              <SkeletonShimmer height="400px" width="340px" />
            </div>
          </div>
          <div className={styles.hotelList}>
            {Array.from({ length: count }).map((_, index) => (
              <HotelCardSkeleton key={index} />
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}