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

export function AskSubtasksForm({ config, onChange }: SectionFormProps) {
  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>1 Job あたりの ASK（ユーザーへの質問）上限</HelpText>
      </div>

      <div>
        <FieldLabel>Subtasks: Max Depth</FieldLabel>
        <FieldInput type="number" value={subtasks.maxDepth ?? ''} onChange={v => onChange('subtasks.maxDepth', v ? Number(v) : undefined)} />
        <HelpText>サブタスクのネスト最大深度</HelpText>
      </div>
    </div>
  );
}
