import { Metadata } from "next";
import { notFound } from "next/navigation";
import regionsCpts from "../../../regions_cpts.json";

import regions, { getRegionFromSlug, getSlugFromRegion } from "@/lib/regions";
import { Header, DepartementsList, RegionList } from "@/components/index";
import {
  Content,
  ContentHeader,
  ContentBody,
  ContentFull,
  ContentHalf,
} from "@/components/Content/Content";
import { getCommuneFromCodePostal } from "@/lib/communes";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Annuaire",
  description: "L'annuaire collaboratif des professionnels de la santé",
};

export async function generateStaticParams() {
  return regions.map((region) => ({
    region: getSlugFromRegion(region),
  }));
}

export default function RegionPage({
  params,
}: {
  params: { regionSlug: string };
}) {
  const region = getRegionFromSlug(params.regionSlug);
  if (!region) return notFound();
  // const nbHabitants = getCommuesFromRegion()

  return (
    <>
      <Header searchField={true} />
      <Content>
        <ContentHeader>
          <div className="prose w-96 text-center">
            <h1 className="pb-0 mb-0">{region.nom}</h1>
            <p className="mt-0 pt-0" title="Chef Lieu">
              {getCommuneFromCodePostal(region.chefLieu).nom}
            </p>
          </div>
          <div className="overflow-x-auto">
            <table className="table">
              <tbody>
                <tr>
                  <th>Nombre de départements</th>
                  <td></td>
                </tr>
                <tr>
                  <th>Nombre d&apos;habitants</th>
                  <td></td>
                </tr>
                <tr>
                  <th>Nombre de SISA</th>
                  <td></td>
                </tr>
                <tr>
                  <th>Nombre de CPTS</th>
                  <td></td>
                </tr>
                <tr>
                  <th>Nombre de SISA</th>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </ContentHeader>
        <ContentBody>
          <ContentFull>yep</ContentFull>
        </ContentBody>
      </Content>
      <RegionList selected={region} />
      <hr></hr>
      <DepartementsList region={region} />
      <hr></hr>
    </>
  );
}