import React from 'react';
import {
  Box,
  Typography,
  TextField,
} from '@mui/material';
import { useFormContext, Controller } from 'react-hook-form';
import { ConfigurationFormContainer, MainContainer } from './configuration-form-container';

export function QAConfiguration() {
  const { control } = useFormContext();

  return (
    <ConfigurationFormContainer>
      <MainContainer>
        {/* 标签数量 */}
        <Box>
          <Typography variant="h6" gutterBottom>
            Top N 标签数量
          </Typography>
          <Controller
            name="parser_config.topn_tags"
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                type="number"
                fullWidth
                label="标签数量"
                inputProps={{ min: 1, max: 10 }}
                onChange={(e) => field.onChange(parseInt(e.target.value))}
              />
            )}
          />
        </Box>

        <Box>
          <Typography variant="body2" color="text.secondary">
            Q&A解析器专门用于处理问答格式的文档，会自动识别问题和答案的结构。
          </Typography>
        </Box>
      </MainContainer>
    </ConfigurationFormContainer>
  );
}