import { ProjectProposal, DashboardSummary } from "./ProjectProposal";
import { getPlansWithTotals } from "./utils";
import DataTable from "@/app/portfolio/[slug]/components/dataTable";
import { planColumns } from "./ProposalColumns";

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

  return (
    <div className="max-w-7xl mx-auto px-6 pb-10 space-y-4">
      <div className="mb-6">
        <header className="text-3xl font-semibold text-brandblue">
          Project Overview
        </header>
        <p className="text-sm text-gray-500">
          Summary of funding, carbon savings, and household metrics.
        </p>
        <div className="h-px bg-gray-200 mt-2" />
      </div>

      <DashboardSummary plans={latestPlans} />
      <ProjectProposal plans={latestPlans} />

      <section>
        <h2 className="text-xl font-semibold text-brandblue mb-1">
          Your Homes
        </h2>
        <DataTable data={latestPlans} columns={planColumns} />
      </section>
    </div>
  );
}
