import type { LucideIcon } from 'lucide-react';

/**
 * One titled block of Administration.
 *
 * Every setting gets one, so the second and third cost nothing to add — as against a single form that
 * has to be broken up the first time anything joins it.
 *
 * ── `status` is top-right, and it is for things that come and go ──
 *
 * Beside the title rather than under the controls: it is a remark about the block, not part of what
 * you are doing, and put in the flow it pushes everything below it down by a line and then pulls it
 * back up — a layout that jumps every time somebody saves.
 *
 * Each block renders its OWN Block, rather than the panel wrapping them. The status belongs to the
 * setting that produced it, and lifting that state up to the panel would put one block's timer in a
 * component that has nothing to do with it.
 */
export const Block = ({
  icon: Icon,
  title,
  hint,
  status,
  children,
}: {
  icon: LucideIcon;
  title: string;
  hint: string;
  /** Top-right. Usually ephemeral — see `useFlash`. */
  status?: React.ReactNode;
  children?: React.ReactNode;
}) => (
  <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
    <div className="flex items-start justify-between gap-3">
      <div className="min-w-0 space-y-1">
        <h3 className="flex items-center gap-2 text-sm font-medium">
          <Icon className="size-4" />
          {title}
        </h3>
        <p className="text-xs text-muted-foreground">{hint}</p>
      </div>
      {/* Reserves nothing when empty. The status is short and the title is not, so there is no reflow
          to guard against — and an always-present placeholder would read as a field. */}
      {status && <div className="shrink-0">{status}</div>}
    </div>
    {children}
  </section>
);