import { Box, Typography } from "@mui/material";
import CardWithImage from "../../components/CreateQuiz/CardWithImage";
import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import { Button, CardActionArea, CardActions } from '@mui/material';
import CustomButton from "../../components/CustomButton";
import Stepper from '@ui_kit/Stepper';
import StartPageSettings from "./StartPageSettings";
import StepOne from "./stepOne";
// import React from "react";


// const [activeStep, setActiveStep] = React.useState(0);
//
// const handleNext = () => {
//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
// };
//
// const handleBack = () => {
//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
// };

export default function StartPage() {
    return (
        <>
            {/*Степпер*/}
            <Stepper />
            {/*первый шаг*/}
            <StepOne/>
            {/*второй шаг*/}
            <Box sx={{
                mt: "60px",
            }}>
                <Typography variant="h5">Стартовая страница</Typography>

                <Box sx={{
                    display: "flex",
                    gap: "3.4%",
                    mt: "40px",
                }}>
                    <Button variant='text'>
                        <CardWithImage image={cardImage1} text="Standart" />
                    </Button>
                    <Button variant='text'>
                        <CardWithImage image={cardImage2} text="Expanded" />
                    </Button>
                    <Button variant='text'>
                        <CardWithImage image={cardImage3} text="Centered" />
                    </Button>
                </Box>
            </Box>
            {/*третий шаг*/}
            <StartPageSettings/>
        </>
    )
}