import type { SubheadBlock } from '@/marketing/cms-types';
import { LabeledRichText } from '../sections/shared';
import { ALIGN_OPTIONS, SelectField } from './shared';

type Props = {
    value: SubheadBlock;
    onChange: (next: SubheadBlock) => void;
    errors?: Record<string, string>;
};

export default function SubheadEditor({ value, onChange, errors }: Props) {
    const e = errors ?? {};
    return (
        <div className="space-y-3">
            <LabeledRichText
                id={`${value.id}-html`}
                label="Subhead"
                value={value.html ?? ''}
                onChange={(html) => onChange({ ...value, html })}
                error={e.html}
                placeholder="Lead paragraph that introduces the section"
                minHeight={70}
            />
            <SelectField
                id={`${value.id}-align`}
                label="Align"
                value={value.align ?? 'left'}
                onChange={(next) => onChange({ ...value, align: next as SubheadBlock['align'] })}
                options={ALIGN_OPTIONS}
                error={e.align}
            />
        </div>
    );
}
