import {Box, Button, Typography} from "@mui/material";
import CardWithImage from "./CardWithImage";
import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";

interface HandleNext {
    handleNext: () => void
}

export default function Steptwo ({handleNext}:HandleNext) {
    return (
        <Box sx={{
            mt: "60px",
        }}>
            <Typography variant="h5">Стартовая страница</Typography>

            <Box sx={{
                display: "flex",
                gap: "3.4%",
                mt: "40px",
            }}>
                <Button variant='text'
                        onClick={() => handleNext()}
                >
                    <CardWithImage image={cardImage1} text="Standart" />
                </Button>
                <Button variant='text'
                            onClick={() => handleNext()}
                >
                    <CardWithImage image={cardImage2} text="Expanded" />
                </Button>
                <Button variant='text'
                            onClick={() => handleNext()}
                >
                    <CardWithImage image={cardImage3} text="Centered" />
                </Button>
            </Box>
        </Box>
    )
}