"use client";

import PropertyCardSkeleton from "./PropertyCardSkeleton";

/** Loading skeleton shown in item place during search/filter navigation */
export default function PropertiesPageSkeleton() {
  const skeletonCount = 8; // matches pageSize

  return (
    <>
      {/* Hero - same height as HeroWrapper (viewport minus navbar) */}
      <div
        className="bg-gray-100 animate-pulse"
        style={{ minHeight: "calc(100dvh - var(--navbar-height, 5rem))" }}
        aria-hidden
      />

      <section className="container mx-auto pb-24 px-4 md:px-8 xl:px-8 2xl:px-0">
        {/* Search bar - same pt/pb as PageContainer */}
        <div className="pt-16 pb-4 lg:pb-12">
          <div className="h-10 w-full max-w-xl bg-gray-100 rounded animate-pulse" />
        </div>

        {/* Same grid as PageContainer */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-y-4 lg:gap-y-12 lg:gap-x-8 xl:gap-x-16">
          {/* Left Sidebar - match filter structure (4 sections + button) */}
          <div className="w-full col-span-1 space-y-0">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="py-6 border-b border-gray-200">
                <div className="h-3 w-24 bg-gray-100 rounded mb-3" />
                <div className="h-12 bg-gray-100 rounded" />
              </div>
            ))}
            <div className="pt-8">
              <div className="h-14 w-full bg-gray-100 rounded animate-pulse" />
            </div>
          </div>

          {/* Right Content - same as PageContainer, full width for actual card size */}
          <div className="col-span-1 md:col-span-2 w-full min-w-0">
            <div className="flex flex-col gap-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16">
                {Array.from({ length: skeletonCount }).map((_, i) => (
                  <PropertyCardSkeleton key={i} />
                ))}
              </div>
              {/* Pagination placeholder - reserves space like ContentArea */}
              <div className="flex justify-center md:-translate-x-20 pt-16">
                <div className="h-10 w-48 bg-gray-100 rounded animate-pulse" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}