import { notFound } from "next/navigation";

import {
  buildUseCaseMetadata,
  UseCasePageTemplate,
} from "@/components/marketing/UseCasePageTemplate";
import {
  allUseCases,
  getUseCasePage,
} from "@/lib/growth-pages";

export function generateStaticParams() {
  return allUseCases.map((item) => ({
    slug: item.slug,
  }));
}

export function generateMetadata({ params }: { params: { slug: string } }) {
  const page = getUseCasePage(params.slug);

  if (!page) {
    return {};
  }

  return buildUseCaseMetadata({
    title: page.title,
    description: page.metaDescription,
    canonicalPath: page.href,
  });
}

export default function UseCaseDetailPage({
  params,
}: {
  params: { slug: string };
}) {
  const page = getUseCasePage(params.slug);

  if (!page) {
    notFound();
  }

  return (
    <UseCasePageTemplate
      title={page.title}
      description={page.metaDescription}
      eyebrow={page.eyebrow}
      intro={page.intro}
      pageType="use_case"
      cluster={page.cluster}
      useCase={page.slug}
      breadcrumbs={[
        { name: "Home", url: "/" },
        { name: "Use Cases", url: "/use-cases" },
        { name: page.title, url: page.href },
      ]}
      answer={page.answer}
      whenToUse={page.whenToUse}
      comparisonItems={page.comparisonItems}
      howToSteps={page.howToSteps}
      primaryCta={{
        href: page.parentHref,
        label: page.ctaLabel,
      }}
      secondaryCta={{
        href: "/use-cases",
        label: "Explore more use cases",
      }}
      workflowTitle={page.workflowTitle}
      workflowIntro={page.workflowIntro}
      workflowCards={page.workflowCards}
      checklistTitle={page.checklistTitle}
      checklist={page.checklist}
      supportLinks={page.supportLinks}
      faq={page.faq}
    />
  );
}
