import type { SpacerBlock } from '@/marketing/cms-types';
import { SelectField } from './shared';

const SIZE_OPTIONS = [
    { value: 'sm', label: 'Small — 16 px' },
    { value: 'md', label: 'Medium — 32 px' },
    { value: 'lg', label: 'Large — 64 px' },
    { value: 'xl', label: 'Extra-large — 96 px' },
] as const;

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

export default function SpacerEditor({ value, onChange, errors }: Props) {
    const e = errors ?? {};
    return (
        <div className="space-y-2">
            <SelectField
                id={`${value.id}-size`}
                label="Size"
                value={value.size ?? 'md'}
                onChange={(next) => onChange({ ...value, size: next as SpacerBlock['size'] })}
                options={SIZE_OPTIONS}
                error={e.size}
                hint="Adds vertical whitespace between blocks."
            />
        </div>
    );
}
