import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import {Typography, useTheme} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import ButtonsNewField from "./ButtonsNewField";
import SwitchNewField from "./SwitchNewField";
import {useState} from "react";


export default function WindowNewField() {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }


    return(
        <>
            <Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', background: theme.palette.background.default}}>
                <Typography>Новое поле</Typography>
                <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
            </Box>

            <Box><ButtonsNewField switchState={switchState} SSHC={SSHC}/></Box>
            <SwitchNewField switchState={switchState}/>
        </>
    )
}