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 "../../components/CreateQuiz/StartPageSettings";
import CreateCard from "../../ui_kit/CreateCard";

export default function StartPage() {
    return (
        <>
            {/*Степпер*/}
            <Stepper />
            {/*первый шаг*/}
            <CreateCard/>
            {/*второй шаг*/}
            <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/>
        </>
    )
}