import { useTranslation } from 'react-i18next';
import { HelpText } from './HelpText';
import { FieldLabel, FieldInput } from './formUtils';
import type { SectionFormProps } from './types';

export function AskSubtasksForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const ask = config.ask ?? {};
  const subtasks = config.subtasks ?? {};

  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">Ask / Subtasks</h2>

      <div>
        <FieldLabel>Ask: Max Per Job</FieldLabel>
        <FieldInput type="number" value={ask.maxPerJob ?? ''} onChange={v => onChange('ask.maxPerJob', v ? Number(v) : undefined)} />
        <HelpText>{t('askSubtasks.askMaxHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Subtasks: Max Depth</FieldLabel>
        <FieldInput type="number" value={subtasks.maxDepth ?? ''} onChange={v => onChange('subtasks.maxDepth', v ? Number(v) : undefined)} />
        <HelpText>{t('askSubtasks.maxDepthHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Subtasks: Max Per Parent</FieldLabel>
        <FieldInput type="number" value={subtasks.maxPerParent ?? ''} onChange={v => onChange('subtasks.maxPerParent', v ? Number(v) : undefined)} />
        <HelpText>{t('askSubtasks.maxPerParentHelp')}</HelpText>
      </div>
    </div>
  );
}