import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import AddImage from "@icons/questionsPage/addImage";
import AddVideofile from "@icons/questionsPage/addVideofile";
import SwitchPageOptions from "./switchPageOptions";

export default function PageOptions() {
    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'}}>
                    <AddImage/>
                    <Typography sx={{
                        fontWeight: 400,
                        fontSize: '16px',
                        lineHeight: '18.96px',
                        color: theme.palette.grey2.main
                    }}>Изображение</Typography>
                    <Typography> или</Typography>
                    <AddVideofile/>
                    <Typography sx={{
                        fontWeight: 400,
                        fontSize: '16px',
                        lineHeight: '18.96px',
                        color: theme.palette.grey2.main
                    }}>Видео</Typography>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
            <SwitchPageOptions switchState={switchState}/>
        </>
    )
}