// heading block — plain-text section heading (h1–h4). Text is rendered as text
// (React escapes it); use rich_text for inline markup.
import { registerBlock } from '../registry'
import { SelectField, TextField } from '../editorKit.jsx'

const LEVELS = [
  ['h1', 'Heading 1'],
  ['h2', 'Heading 2'],
  ['h3', 'Heading 3'],
  ['h4', 'Heading 4'],
]
const VALID = ['h1', 'h2', 'h3', 'h4']

function HeadingBlock({ props }) {
  const Tag = VALID.includes(props.level) ? props.level : 'h2'
  return <Tag className="page-heading">{props.text}</Tag>
}

function HeadingEditor({ props, onChange }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <SelectField
        label="Level"
        value={props.level || 'h2'}
        onChange={(level) => onChange({ ...props, level })}
        options={LEVELS}
      />
      <TextField
        label="Text"
        value={props.text}
        maxLength={200}
        onChange={(text) => onChange({ ...props, text })}
      />
    </div>
  )
}

registerBlock({
  type: 'heading',
  version: 1,
  label: 'Heading',
  icon: 'H',
  component: HeadingBlock,
  editor: HeadingEditor,
  defaults: () => ({ level: 'h2', text: '' }),
})
