import { Box, Typography, useTheme } from "@mui/material";
import CreationCard from "../components/CreateQuiz/CreationCard";
import quizCreationImage1 from "../assets/quiz-creation-1.png";
import quizCreationImage2 from "../assets/quiz-creation-2.png";
import { useState } from "react";
export default function CreateCard() {
    const theme = useTheme();
    const [progress, setProgress] = useState<number>(1 / 6);
    return (<>
        <Box
        sx={{
            border: `1px solid ${theme.palette.brightPurple.main}`,
            borderRadius: "12px",
            overflow: "hidden",
            px: "20px",
            pt: "20px",
            pb: "10px",
            position: "relative",
        }}
    >
        <Box
            sx={{
                backgroundColor: "white",
                height: "10px",
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                boxShadow: `0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
            }}
        />
        <Box
            sx={{
                backgroundColor: theme.palette.brightPurple.main,
                height: "10px",
                position: "absolute",
                top: 0,
                left: 0,
                width: `${(progress * 100).toFixed(3)}%`,
            }}
        />
        <Typography
            sx={{
                fontSize: "12px",
                lineHeight: "14px",
                color: "#4D4D4D",
            }}
        >Шаг 1 из 6</Typography>
        <Typography
            sx={{
                fontSize: "18px",
                lineHeight: "24px",
                color: "#4D4D4D",
                mt: "5px",
            }}
        >Настройка стартовой страницы</Typography>
    </Box>
    <Box sx={{
        display: "flex",
        gap: "3.4%",
        mt: "60px",
    }}>
        <CreationCard
            header="Создание квиз-опроса"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage1}
        />
        <CreationCard
            header="Создание анкеты"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage2}
        />
    </Box>
    </>
    )
}