"use client";

import { GovernanceTemplateGrid } from "../../../components/sections/GovernanceTemplateGrid";
import type { TemplateGridCardEntry } from "../../../../lib/templates/templateGridPresentation";
import { useTranslation } from "../../../contexts/MessagesContext";
import { useTemplatesFacetGridEntries } from "../../../(marketing)/templates/useTemplatesFacetGridEntries";
import { CreateFlowHeaderLockup } from "../components/CreateFlowHeaderLockup";
import { CreateFlowStepShell } from "../components/CreateFlowStepShell";
import { CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS } from "../components/createFlowLayoutTokens";
import { buildTemplateReviewHref } from "../utils/flowSteps";

export function CreateFlowTemplatesPageClient({
  initialGridEntries,
}: {
  initialGridEntries: TemplateGridCardEntry[];
}) {
  const t = useTranslation("pages.templates");
  const entries = useTemplatesFacetGridEntries({
    initialGridEntries,
    enableFacetRecommendations: true,
  });

  return (
    <CreateFlowStepShell
      variant="wideGridLoosePadding"
      contentTopBelowMd="space-1400"
    >
      <div
        className={`mx-auto flex w-full min-w-0 flex-col gap-6 pb-8 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
      >
        <CreateFlowHeaderLockup
          title={t("title")}
          description={t("subtitle")}
          justification="left"
        />
        <GovernanceTemplateGrid
          entries={entries}
          hrefForTemplate={(slug) =>
            buildTemplateReviewHref(slug, { fromCreateWizard: true })
          }
        />
      </div>
    </CreateFlowStepShell>
  );
}