import {Box, Button, IconButton, Skeleton, Typography, useMediaQuery, useTheme} from "@mui/material";
import LinkIcon from "@icons/LinkIcon";
import PencilIcon from "@icons/PencilIcon";
import ChartIcon from "@icons/ChartIcon";
import CopyIcon from "@icons/CopyIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import React from "react";

export default function QuizCardDummy() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column",
                backgroundColor: "white",
                width: isMobile ? "100%" : "560px",
                height: "280px",
                p: "20px",
                borderRadius: "12px",
                boxSizing: "border-box",
                boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
            }}
        >
            <Skeleton variant="text" sx={{ fontSize: "24px", width: "100%", height: "30px" }} />
            <Box
                sx={{
                    display: "flex",
                    alignItems: "center",
                    mt: "10px",
                    gap: "10px",
                }}
            >
                <LinkIcon bgcolor="#EEE4FC" color={theme.palette.brightPurple.main} />
                <Skeleton variant="text" sx={{ fontSize: "18px", maxWidth: "300px", width: "100%", height: "30px"}} />
            </Box>
            <Box
                sx={{
                    display: "flex",
                    mt: "32px",
                    mr: "22px",
                }}
            >
                <Box sx={{ flex: "1 1 0" }}>
                    <Skeleton variant="text" sx={{  width: "100%", height: "30px", maxWidth: "100px", }} />
                    <Typography color={theme.palette.grey3.main}>Открытий</Typography>
                </Box>
                <Box sx={{ flex: "1 1 0" }}>
                    <Skeleton variant="text" sx={{  maxWidth: "100px", width: "100%", height: "30px"}} />
                    <Typography color={theme.palette.grey3.main}>Заявок</Typography>
                </Box>
                <Box sx={{ flex: "1 1 0" }}>
                    <Skeleton variant="text" sx={{ maxWidth: "100px", width: "100%", height: "30px"}} />
                    <Typography color={theme.palette.grey3.main}>Конверсия</Typography>
                </Box>
            </Box>
            <Box
                sx={{
                    mt: "auto",
                    display: "flex",
                    gap: isMobile ? "10px" : "20px",
                }}
            >
                <Button
                    variant="contained"
                    sx={{
                        padding: "10px 39px",
                    }}
                >
                    Заявки
                </Button>
                <Button
                    variant="outlined"
                    startIcon={<PencilIcon />}
                    sx={{
                        padding: isMobile ? "10px" : "10px 20px",
                        minWidth: "unset",
                        color: theme.palette.brightPurple.main,
                        "& .MuiButton-startIcon": {
                            marginRight: isMobile ? 0 : "4px",
                            marginLeft: 0,
                        },
                    }}
                >
                    {isMobile ? "" : "Редактировать"}
                </Button>
                <IconButton
                    sx={{
                        height: "44px",
                        width: "44px",
                        border: `${theme.palette.brightPurple.main} 1px solid`,
                        borderRadius: "6px",
                    }}
                >
                    <ChartIcon />
                </IconButton>
                <IconButton
                    sx={{
                        height: "44px",
                        width: "44px",
                        borderRadius: "6px",
                    }}
                >
                    <CopyIcon
                        color={theme.palette.brightPurple.main}
                        bgcolor={"#EEE4FC"}
                    />
                </IconButton>
                <IconButton
                    sx={{
                        color: theme.palette.brightPurple.main,
                        ml: "auto",
                    }}
                >
                    <MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
                </IconButton>
            </Box>
        </Box>
    );
}