import { Hammer } from 'lucide-react';
import type { Section } from './sections';

/**
 * A section that is agreed and not built.
 *
 * It says so plainly, and then says what it will be. Both halves matter: "not built" alone reads as an
 * error, and a description alone reads as a feature that is broken. Together they read as a plan, which is
 * what they are.
 *
 * The alternative was to hide these until they exist, and that loses the thing the nav is good at — a
 * person opening this plugin can see what it is FOR, not only what it currently does. `README.md` carries
 * the full design; this is the two sentences that fit on a screen.
 */

/**
 * **Empty, and the component stays.**
 *
 * `domains` and `dns-providers` were both here and both got built, which is the outcome this was for. The
 * mechanism is worth keeping for the next agreed-and-unbuilt section: a nav that shows where the plugin is
 * going is more useful than one that only shows where it is.
 */
const COPY: Partial<Record<Section['key'], { what: string; why: string }>> = {};

export const PlannedSection = ({ section }: { section: Section }) => {
  const copy = COPY[section.key];

  return (
    <div className="flex size-full flex-col items-center justify-center gap-3 p-8 text-center">
      <Hammer className="size-8 text-muted-foreground" />
      <p className="text-sm font-medium">{section.label} is not built yet.</p>
      {copy && (
        <>
          <p className="max-w-md text-sm text-muted-foreground">{copy.what}</p>
          <p className="max-w-md text-[11px] leading-relaxed text-muted-foreground">{copy.why}</p>
        </>
      )}
      <p className="text-[11px] text-muted-foreground">The design is in this plugin’s README.</p>
    </div>
  );
};