import { Suspense } from "react";
import { notFound } from "next/navigation";
import ContentPage from "@/components/content/content-page";
import { getIndustry } from "@/lib/pages";
import { pageMetadata } from "@/lib/metadata";
import { industryNav } from "@/lib/routes";

type Params = PageProps<"/industries/[slug]">["params"];

export function generateStaticParams() {
  return industryNav.map((s) => ({ slug: s.slug }));
}

export async function generateMetadata({ params }: PageProps<"/industries/[slug]">) {
  const { slug } = await params;
  const page = getIndustry(slug);
  return page ? pageMetadata(page) : {};
}

export default function Page({ params }: PageProps<"/industries/[slug]">) {
  return (
    <Suspense fallback={<section className="hero page-hero" aria-busy="true" />}>
      <Content params={params} />
    </Suspense>
  );
}

async function Content({ params }: { params: Params }) {
  const { slug } = await params;
  const page = getIndustry(slug);
  if (!page) notFound();
  const name = industryNav.find((s) => s.slug === slug)?.name ?? slug;

  return (
    <ContentPage
      page={page}
      crumbs={[
        { name: "Home", href: "/" },
        { name: "Industries", href: "/industries" },
        { name, href: `/industries/${slug}` },
      ]}
    />
  );
}