import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import SwitchTextField from "./switchTextField";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import InfoIcon from "@icons/InfoIcon";

export default function OwnTextField() {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }
    return (
        <>
            <Box
                sx={{
                    width: '100%',
                    maxWidth: '640px',
                    display: 'flex',
                    padding: '20px',
                    flexDirection: 'column',
                    gap: '20px'}}
            >
               <CustomTextField placeholder={"Пример ответа"} text={''}/>
                <Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
                    <Typography sx={{
                        fontWeight: 400,
                        fontSize: '16px',
                        lineHeight: '18.96px',
                        color: theme.palette.grey2.main
                    }}>Пользователю будет дано поле для ввода значения  </Typography>
                    <InfoIcon/>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
            <SwitchTextField switchState={switchState}/>
        </>
    )
}