import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';

type PhraseFormData = { phrase: string; sort_order: number; status: boolean };

export function PhraseFormFields({ data, errors, setData, statusId = 'phrase-status' }: { data: PhraseFormData; errors: Partial<Record<keyof PhraseFormData, string>>; setData: (key: string, value: unknown) => void; statusId?: string }) {
    return (
        <>
            <FormGroup label="Phrase" helpText="A short word or phrase in the scrolling line at the bottom of the homepage." error={errors.phrase} inputProps={{ value: data.phrase, onChange: (event) => setData('phrase', event.target.value), required: true, maxLength: 80 }} />
            <FormNumberInput label="Display order" min={0} value={data.sort_order} error={errors.sort_order} required onChange={(value) => setData('sort_order', value)} />
            <FormSwitch id={statusId} label="Published" checked={data.status} onChange={(event) => setData('status', event.target.checked)} />
        </>
    );
}