"use client"

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

import ExperienceListSkeleton from "../../ExperienceList/ExperienceListSkeleton"

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

export default function CityListingItemSkeleton() {
  return (
    <article className={styles.container}>
      <div className={styles.imageWrapper}>
        <SkeletonShimmer width="100%" height="100%" />
      </div>
      <section className={styles.content}>
        <SkeletonShimmer height="52px" />
        <ExperienceListSkeleton />
        <div>
          <SkeletonShimmer height="20px" width="95%" />
          <SkeletonShimmer height="20px" width="100%" />
          <SkeletonShimmer height="20px" width="90%" />
          <SkeletonShimmer height="20px" width="40%" />
        </div>

        <Divider variant="horizontal" color="primaryLightSubtle" />

        <div className={styles.ctaWrapper}>
          <SkeletonShimmer height="45px" width="100px" />
        </div>
      </section>
    </article>
  )
}
