import {
  KpiGridSkeleton,
  SalesDailyKpiGridSkeleton,
} from "@/components/dashboard/kpi-grid"
import { DashboardCardFallback } from "@/components/dashboard/dashboard-lazy-sections"

export function DashboardPageSkeleton() {
  return (
    <div
      className="flex flex-col gap-6 p-1 sm:p-2 md:p-4 overflow-y-auto scrollbar-themed"
      role="status"
      aria-busy="true"
      aria-live="polite"
      aria-label="Loading sales reports"
    >
      <div className="flex flex-col gap-4 border-b border-border/40 pb-5">
        <div className="flex flex-col">
          <h1 className="text-[25px] font-extrabold text-text font-['Lexend'] tracking-tight leading-none">
            Sales Reports
          </h1>
          <p className="text-[12px] text-gray-500 mt-2 font-['Lexend_Deca']">
            All-time performance overview -{" "}
            <span className="font-bold text-text">Jumppace Agency</span>
          </p>
        </div>
      </div>

      <KpiGridSkeleton />

      <section aria-label="Daily sales benchmarks">
        <SalesDailyKpiGridSkeleton />
      </section>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <DashboardCardFallback minHeight="220px" />
        <DashboardCardFallback minHeight="200px" />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-[1.4fr_1fr_1fr] gap-4">
        <DashboardCardFallback minHeight="280px" />
        <DashboardCardFallback minHeight="240px" />
        <DashboardCardFallback minHeight="320px" />
      </div>
    </div>
  )
}