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";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";

interface HandleNext {
    handleNext: () => void
}

export default function Steptwo ({handleNext}:HandleNext) {
    const params = Number(useParams().quizId);
    const {listQuizes, updateQuizesList} = quizStore()
    return (
        <Box sx={{
            mt: "60px",
        }}>
            <Typography variant="h5">Стартовая страница</Typography>

            <Box sx={{
                display: "flex",
                gap: "3.4%",
                mt: "40px",
            }}>
                <Button variant='text'
                        onClick={() => {
                            updateQuizesList(params, {startpage: "standard"})
                            handleNext()
                        }}
                >
                    <CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} />
                </Button>
                <Button variant='text'
                            onClick={() => {
                                updateQuizesList(params, {startpage: "expanded"})
                                handleNext()
                            }}
                >
                    <CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/>
                </Button>
                <Button variant='text'
                            onClick={() => {
                                updateQuizesList(params, {startpage: "centered"})
                                handleNext()
                            }}
                >
                    <CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/>
                </Button>
            </Box>
        </Box>
    )
}