import { ROLES } from './roles';

/**
 * Which type role a heading is drawn at.
 *
 * ── A role, not a size ──
 *
 * The four are named and sized under Layout, so a heading set to Titles follows whatever Titles is set
 * to and keeps following it. Offering point sizes here would be a second place to change one, and the
 * two would part company the first time somebody used the panel that exists for it.
 *
 * The same `ROLES` list Fonts and Font Sizes read, so all three name the same four things in the same
 * order — which is the only reason somebody moving between them can trust what they see.
 *
 * Disabled with no heading, because the size of a heading that does not exist is not a question. The
 * field above it is where one starts.
 */
export const TitleSize = ({
  value,
  disabled,
  onChange,
}: {
  /** `display`, `title`, `body`, `sub` — or null for the default, which is Headings. */
  value: string | null | undefined;
  disabled?: boolean;
  onChange: (next: string | null) => void;
}) => (
  <div className="flex flex-col gap-1">
    <label className="text-xs">Heading size</label>
    <select
      value={value ?? 'title'}
      disabled={disabled}
      onChange={(event) => {
        const next = event.currentTarget.value;
        // `title` IS the default, so choosing it stores nothing — a heading nobody has thought about
        // and one deliberately set to Headings should not be two different rows.
        onChange(next === 'title' ? null : next);
      }}
      className="h-9 rounded-md border border-input bg-background px-2 text-sm disabled:opacity-50"
    >
      {ROLES.map((role) => (
        <option key={role.size} value={role.size}>
          {role.label}
        </option>
      ))}
    </select>
  </div>
);