import { lazy, Suspense } from "react"

import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
import { DASHBOARD_METRICS, DASHBOARD_INSIGHT } from "@/lib/mock/dashboard"
import { DashboardLoadingFallback } from "./_dashboard-loading"

/**
 * `next/dynamic` → `React.lazy`. The skeleton fallback below mirrors the
 * one the Next page used.
 */
const DashboardTabs = lazy(() =>
  import("@/components/dashboard-tabs").then(m => ({ default: m.DashboardTabs })),
)

export default function DashboardPage() {
  return (
    <PrimaryPageTemplate siteHeader={{ title: "Dashboard" }}>
      <Suspense fallback={<DashboardLoadingFallback />}>
        <DashboardTabs
          title="Dashboard"
          subtitle="Design system shell · sample metrics and charts"
          metrics={DASHBOARD_METRICS}
          insight={DASHBOARD_INSIGHT}
        />
      </Suspense>
    </PrimaryPageTemplate>
  )
}
