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

/**
 * A section that has a place in the nav and no panel yet.
 *
 * It says what it WILL do rather than apologising. A screen reading "coming soon" tells somebody they
 * were right to look and wrong to expect anything; naming the thing at least confirms they are in the
 * right place, and that the section is planned rather than broken.
 *
 * The htmx admin at `admin.fofos.com` still edits every one of these, so nothing here is unreachable
 * work — it is work that has not moved yet. Saying so is the difference between "not built" and
 * "not possible".
 */
export const PlannedSection = ({ section }: { section: Section }) => (
  <div className="flex size-full flex-col items-center justify-center gap-2 p-6 text-center">
    <Hammer className="size-6 text-muted-foreground/50" />
    <p className="text-sm">{section.label} is not built here yet.</p>
    <p className="max-w-sm text-xs text-muted-foreground">{section.hint}.</p>
    <p className="max-w-sm text-xs text-muted-foreground/80">
      Until it moves, this section is still editable in the old admin.
    </p>
  </div>
);