import {
  loadBaselineMetrics,
  getCountByPropertyType,
  getScenarios,
} from "@/app/portfolio/[slug]/(portfolio)/reporting/databaseFunctions";
import { ReportingClientArea } from "./ReportingClientArea";

export default async function ReportingPage(props: {
  params: Promise<{ slug: string }>;
}) {
  const params = await props.params;
  const portfolioId = params.slug;

  const [baseline, propertyTypes] = await Promise.all([
    loadBaselineMetrics(Number(portfolioId)),
    getCountByPropertyType(Number(portfolioId)),
  ]);
  const scenarios = await getScenarios(Number(portfolioId));

  return (
    <div className="max-w-8xl mx-auto px-6 pb-10 space-y-4 pt-4">
      <div className="mb-6">
        <header className="text-3xl font-semibold text-brandblue">
          Portfolio Overview
        </header>
        <div className="h-px bg-gray-200 mt-2" />
      </div>

      <ReportingClientArea
        baseline={baseline}
        propertyTypes={propertyTypes}
        scenarios={scenarios}
        portfolioId={Number(portfolioId)}
      />
    </div>
  );
}
