import {Box, Link, Typography, useTheme} from "@mui/material";
import AddImage from "@icons/questionsPage/addImage";
import EnterIcon from "@icons/questionsPage/enterIcon";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import SwitchOptionsAndPict from "./switchOptionsAndPict";
import React from "react";

export default function OptionsAndPicture() {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }
return (
    <>
        <Box sx={{ padding: '20px'}}>
            <Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
                <AddImage/>
                <Typography
                    sx={{
                        padding: '0 0 0 20px',
                        fontWeight: 400,
                        fontSize: '18px',
                        lineHeight: '21.33px',
                        color: theme.palette.grey2.main
                    }}
                >
                    Добавьте ответ
                </Typography>
            </Box>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>

                <Link
                    component="button"
                    variant="body2"
                    sx={{color: theme.palette.brightPurple.main}}
                    // onClick={() => {
                    //     console.info("I'm a button.");
                    // }}
                >
                    Добавьте ответ
                </Link>
                <Typography
                    sx={{
                        fontWeight: 400,
                        fontSize: '18px',
                        lineHeight: '21.33px',
                        color: theme.palette.grey2.main
                    }}
                >или нажмите Enter</Typography>
                <EnterIcon/>
            </Box>
        </Box>
        <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC}/>
        <SwitchOptionsAndPict switchState={switchState}/>
    </>
)
}