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 FaqFormData = {
    question: string;
    answer: string;
    sort_order: number;
    status: boolean;
};

export function FaqFormFields({
    data,
    errors,
    setData,
    statusId = 'faq-status',
}: {
    data: FaqFormData;
    errors: Partial<Record<keyof FaqFormData, string>>;
    setData: (key: string, value: unknown) => void;
    statusId?: string;
}) {
    return (
        <>
            <FormGroup label="Question" error={errors.question} inputProps={{ value: data.question, onChange: (event) => setData('question', event.target.value), required: true }} />
            <FormGroup as="textarea" label="Answer" error={errors.answer} inputProps={{ value: data.answer, onChange: (event) => setData('answer', event.target.value), required: true, rows: 4 }} />
            <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)} />
        </>
    );
}