"use client"

import SkeletonShimmer from "@/components/SkeletonShimmer"

import CityListingItemSkeleton from "./CityListingItem/CityListingItemSkeleton"

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

export default function CityListingSkeleton() {
  return (
    <section className={styles.container}>
      <div className={styles.listHeader}>
        <SkeletonShimmer height="30px" width="200px" />
        <SkeletonShimmer height="30px" width="120px" />
      </div>
      <ul className={styles.cityList}>
        {Array.from({ length: 3 }).map((_, index) => (
          <CityListingItemSkeleton key={index} />
        ))}
      </ul>
    </section>
  )
}
