import {Box, Button,  SxProps, Theme, Typography, useTheme} from "@mui/material";
import OneIconBorder from "../../assets/icons/OneIconBorder";
import React from "react";
import NumberTwo from "@icons/NumberTwo";
import NumberThree from "@icons/NumberThree";

interface Props {
    outerContainerSx?: SxProps<Theme>;
    children?: React.ReactNode;
}

export default function InstallQzOnSiteParent ({outerContainerSx: sx, children}: Props) {
    const theme = useTheme();
    return (
        <>
            <Box
                sx={{
                    maxWidth: "1160px",
                    backgroundColor: '#ffffff',
                    padding: '20px',
                    mt: '40px',
                    borderRadius: '12px',
                    boxShadow: '0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)'
                }}>
                <Box sx={{display:'flex', alignItems: 'center'}}>
                    <Typography variant='h5' sx={{paddingRight: '30px'}}>Установка квизов на сайте</Typography>
                    <OneIconBorder color={theme.palette.brightPurple.main}/>
                    <Typography sx={{color: theme.palette.brightPurple.main}}>Способ установки</Typography>
                    <NumberTwo color={'#FC712F'}/>
                    <Typography sx={{color: '#FC712F'}}>Настройка кнопки</Typography>
                    <NumberThree color={theme.palette.grey2.main}/>
                    <Typography sx={{color: theme.palette.grey2.main}}>Вставить код на сайт</Typography>
                </Box>

                <Box
                    sx={{
                        display: 'flex',
                        gap: '40px',
                        marginTop: '30px',
                        ...sx
                    }}
                >

                    {children}

                </Box>
                <Box sx={{display: 'flex', justifyContent: 'end'}}>
                    <Button variant='contained'>Далее</Button>
                </Box>

            </Box>

        </>
    )
}