"use client";

import { Hammer } from "lucide-react";
import { PageHeader } from "@/components/shared/page-header";
import { PORTAL_MODULES, type PortalModuleKey } from "@/config/portal-modules";
import { useT } from "@/i18n";

/**
 * The page behind a module whose screen has not been built yet.
 *
 * The route, the menu entry and the access rule are all real — `PortalShell` already turns away a
 * user who may not open it — so only the body is missing. Saying so plainly beats an empty table
 * that reads as "you have nothing here".
 */
export function ModulePlaceholder({ module: moduleKey }: { module: PortalModuleKey }) {
  const t = useT();
  const entry = PORTAL_MODULES.find((m) => m.key === moduleKey);
  if (!entry) return null;

  return (
    <div className="mx-auto max-w-2xl">
      <PageHeader title={t(entry.labelKey)} subtitle={t(entry.descriptionKey)} />
      <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed bg-surface px-6 py-14 text-center">
        <span className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-muted text-muted-foreground">
          <Hammer className="h-5 w-5" aria-hidden />
        </span>
        <p className="text-sm font-semibold text-foreground">{t("portal.soon.title")}</p>
        <p className="max-w-sm text-xs leading-relaxed text-muted-foreground">{t("portal.soon.body")}</p>
      </div>
    </div>
  );
}