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.
 */

const COPY: Partial<Record<Section['key'], { what: string; why: string }>> = {
  domains: {
    what: 'The domains you manage on this machine, and who each one is registered with.',
    why: 'Right now that list lives in a document somebody edits by hand, which is right on the day it is written. Officer knowing it for real is what lets a certificate be issued without being told the same facts again.',
  },
  'dns-providers': {
    what: 'An API key per registrar — Cloudflare, GoDaddy, whoever — kept in the secret store and never handed back out.',
    why: 'This is what makes HTTPS possible on a hostname that only exists on your private network. Let’s Encrypt cannot visit a private address, so the only proof it accepts is a DNS record, and placing one needs the registrar’s API.',
  },
};

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>
  );
};