import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"

import SkeletonShimmer from "@/components/SkeletonShimmer"

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

export default function HotelListingItemSkeleton() {
  return (
    <article className={styles.hotelListingItem}>
      <div className={styles.imageWrapper}>
        <SkeletonShimmer width="100%" height="220px" />
      </div>
      <div className={styles.content}>
        <div className={styles.intro}>
          <SkeletonShimmer width="20ch" height="30px" />
          <Typography variant="Title/Subtitle/md">
            <SkeletonShimmer width="25ch" />
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div className={styles.captions}>
              <SkeletonShimmer width="10ch" />
              <span>
                <Divider
                  className={styles.divider}
                  variant="vertical"
                  color="Border/Divider/Default"
                />
              </span>
              <SkeletonShimmer width="20ch" />
            </div>
          </Typography>
        </div>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            <SkeletonShimmer width="100%" />
            <SkeletonShimmer width="70%" />
            <SkeletonShimmer width="35%" />
          </p>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <ul className={styles.amenityList}>
            {Array.from({ length: 5 }).map((_, index) => {
              return (
                <li className={styles.amenityItem} key={index}>
                  <SkeletonShimmer width="20px" height="20px" />
                  <SkeletonShimmer width="15ch" />
                </li>
              )
            })}
          </ul>
        </Typography>
      </div>
      <div className={styles.ctaWrapper}>
        <SkeletonShimmer width="100%" height="40px" />
      </div>
    </article>
  )
}