import { Suspense } from 'react';

import { ChartSkeleton } from '@/components/charts/chart-skeleton.js';
import type { Metadata } from 'next';

import { DemandChartSection } from './_sections/demand-chart-section.js';

export const metadata: Metadata = {
  title: 'Demand Analysis | Energy & AI Dashboard',
  description: 'Regional electricity demand growth, peak tracking, and datacenter load impact',
};

export default function DemandPage() {
  return (
    <div className="px-4 py-6 sm:px-6 sm:py-8">
      <div className="mb-6 sm:mb-8">
        <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">Demand Analysis</h1>
        <p className="mt-2 text-muted-foreground">
          Regional demand growth trends, peak demand tracking, and estimated datacenter load as a percentage of regional
          demand.
        </p>
      </div>

      <Suspense fallback={<ChartSkeleton />}>
        <DemandChartSection />
      </Suspense>
    </div>
  );
}