"use client"

import SkeletonShimmer from "@/components/SkeletonShimmer"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"

import ExperienceListSkeleton from "../ExperienceList/ExperienceListSkeleton"
import HotelListingSkeleton from "../HotelListing/HotelListingSkeleton"
import SidebarContentWrapperSkeleton from "../SidebarContentWrapper/SidebarContentWrapperSkeleton"
import TopImagesSkeleton from "../TopImages/TopImagesSkeleton"

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

export default function DestinationCityPageSkeleton() {
  return (
    <div className={styles.pageContainer}>
      <header className={styles.header}>
        <BreadcrumbsSkeleton />
        <TopImagesSkeleton />
      </header>
      <main className={styles.mainContent}>
        <HotelListingSkeleton />
      </main>
      <aside className={styles.sidebar}>
        <SidebarContentWrapperSkeleton>
          <div>
            <SkeletonShimmer height="20px" width="90%" />
            <SkeletonShimmer height="20px" width="70%" />
            <SkeletonShimmer height="20px" width="100%" />
            <SkeletonShimmer height="20px" width="40%" />
          </div>
          <ExperienceListSkeleton />
          <div>
            <SkeletonShimmer height="200px" width="100%" />
          </div>
        </SidebarContentWrapperSkeleton>
      </aside>
    </div>
  )
}
