// quote block — a pull quote with optional attribution.
import { registerBlock } from '../registry'
import { TextAreaField, TextField } from '../editorKit.jsx'

function QuoteBlock({ props }) {
  if (!props.text) return null
  return (
    <figure className="page-quote">
      <blockquote>{props.text}</blockquote>
      {props.attribution && <figcaption>— {props.attribution}</figcaption>}
    </figure>
  )
}

function QuoteEditor({ props, onChange }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <TextAreaField
        label="Quote"
        value={props.text}
        rows={3}
        maxLength={1000}
        onChange={(text) => onChange({ ...props, text })}
      />
      <TextField
        label="Attribution (optional)"
        value={props.attribution}
        maxLength={200}
        onChange={(attribution) => onChange({ ...props, attribution })}
      />
    </div>
  )
}

registerBlock({
  type: 'quote',
  version: 1,
  label: 'Quote',
  icon: '❝',
  component: QuoteBlock,
  editor: QuoteEditor,
  defaults: () => ({ text: '', attribution: '' }),
})
