import { CustomRadioGroup } from "@/components/CustomRadioGroup/CustomRadioGroup"
import { Box, Typography } from "@mui/material"
import { MinifiedData } from "../types";

interface Props {
    items: MinifiedData[];
    fieldsItems: MinifiedData[];
    currentField: string;
    currentQuestion: string;
    setCurrentField: (value: string) => void;
    setCurrentQuestion: (value: string) => void;
}
export const NewFields = ({
    items,
    currentQuestion,
    setCurrentQuestion,
}: Props) => {
    
    return (
        <Box
            sx={{
                display: "inline-flex",
                justifyContent: "space-between",
                width: "100%",
                height: "300px"
            }}
        >
            <Box
                sx={{
                    width: "100%"
                }}
            >
                <Typography
                    sx={{
                        fontSize: "16px",
                        fontWeight: 400,
                        lineHeight: "18.96px",
                        textAlign: "left",
                        color: "#9A9AAF",
                        m: "15px 0 10px",
                    }}
                >Выберите вопрос для поля. Название поля настроится автоматически</Typography>
                <CustomRadioGroup
                    items={items}
                    selectedItemId={currentQuestion}
                    setSelectedItem={setCurrentQuestion}
                    handleScroll={() => { }}
                    activeScope={undefined}
                />
            </Box>
        </Box>
    )
}