import type { FormConfigSubmit } from '~/src/ui/components/form';

import { useI18n } from '~/src/lib/i18n';
import { Collapsible } from '~/src/ui/components/collapsible';
import { Form } from '~/src/ui/components/form';

interface FormSubmitEditProps extends FormConfigSubmit {
  onChange: (data: Partial<FormConfigSubmit>) => void;
}

export const FormSubmitEdit = (props: FormSubmitEditProps) => {
  const { onChange } = props;
  const { t } = useI18n('formBuilder');

  return (
    <Collapsible title={t('confirmationButton')}>
      <Form
        mode="onChange"
        onChange={onChange}
        config={{
          fields: [
            {
              name: 'label',
              label: 'Button Label',
              type: 'text',
              placeholder: 'Submit',
            },
          ],
        }}
      />
    </Collapsible>
  );
};