"use client"

import SkeletonShimmer from "@/components/SkeletonShimmer"

import CityListItemSkeleton from "../CityListItem/CityListItemSkeleton"

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

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