import {Box, Button, Typography, useTheme} from "@mui/material";
import CreationCard from "@ui_kit/CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";

interface HandleNext {
    handleNext: () => void
}

export default function StepOne({handleNext}:HandleNext) {
    const theme = useTheme();
    return (
        <>
    <Box sx={{
        display: "flex",
        gap: "3.4%",
        mt: "60px",
    }}>
        <Button variant='text'
                onClick={() => handleNext()}
        >
            <CreationCard
                header="Создание квиз-опроса"
                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                image={quizCreationImage1}
            />
        </Button>
        <Button variant='text'
                onClick={() => handleNext()}
        >
            <CreationCard
                header="Создание анкеты"
                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                image={quizCreationImage2}
            />
        </Button>
    </Box>
    </>
    )
}