"use client"

import SkeletonShimmer from "@/components/SkeletonShimmer"

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

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

export default function CityListItemSkeleton() {
  return (
    <article className={styles.cityListItem}>
      <div className={styles.imageWrapper}>
        <SkeletonShimmer width="100%" height="100%" />
      </div>
      <section className={styles.content}>
        <SkeletonShimmer height="52px" />
        <div className={styles.experienceList}>
          <ExperienceListSkeleton />
        </div>
        <div className={styles.ctaWrapper}>
          <SkeletonShimmer height="45px" width="100%" />
        </div>
      </section>
    </article>
  )
}
