/**
 * Confirmation node config
 */

import React from 'react';
import type { NodeConfigRendererProps } from './types';

import { useLanguage } from '../../../../providers/language/LanguageContext';

export const ConfirmationNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
  const { t } = useLanguage();
  return (
    <>
      <div>
        <label>Frage</label>
        <input
          value={(params.question as string) ?? ''}
          onChange={(e) => updateParam('question', e.target.value)}
          placeholder={t('confirmationNodeConfig.moechtenSieBestaetigen')}
        />
      </div>
      <div>
        <label>{t('confirmationNodeConfig.bestaetigenbutton')}</label>
        <input
          value={(params.confirmLabel as string) ?? 'Confirm'}
          onChange={(e) => updateParam('confirmLabel', e.target.value)}
        />
      </div>
      <div>
        <label>Ablehnen-Button</label>
        <input
          value={(params.rejectLabel as string) ?? 'Reject'}
          onChange={(e) => updateParam('rejectLabel', e.target.value)}
        />
      </div>
    </>
  );
};