import { Box, IconButton, Typography, useTheme } from "@mui/material";
import ChartIcon from "../assets/icons/ChartIcon";
import CustomButton from "./CustomButton";
import LinkIcon from "../assets/icons/LinkIcon";
import PencilIcon from "../assets/icons/PencilIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";


interface Props {
    name: string;
    openCount?: number;
    applicationCount?: number;
    conversionPercent?: number;
}

export default function QuizCard({ name, openCount = 0, applicationCount = 0, conversionPercent = 0 }: Props) {
    const theme = useTheme();

    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column",
                backgroundColor: "white",
                width: "560px",
                height: "280px",
                p: "20px",
                borderRadius: "12px",
                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)`,
            }}
        >
            <Typography variant="h5">{name}</Typography>
            <Box
                sx={{
                    display: "flex",
                    alignItems: "center",
                    mt: "10px",
                    gap: "10px",
                }}
            >
                <LinkIcon bgcolor="#EEE4FC" color={theme.palette.brightPurple.main} />
                <Typography color={theme.palette.grey3.main}>быстрая ссылка ...</Typography>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    mt: "32px",
                    mr: "22px",
                }}
            >
                <Box sx={{flex: "1 1 0"}}>
                    <Typography variant="h5">{openCount}</Typography>
                    <Typography color={theme.palette.grey3.main}>Открытий</Typography>
                </Box>
                <Box sx={{flex: "1 1 0"}}>
                    <Typography variant="h5">{openCount}</Typography>
                    <Typography color={theme.palette.grey3.main}>Заявок</Typography>
                </Box>
                <Box sx={{flex: "1 1 0"}}>
                    <Typography variant="h5">{openCount} %</Typography>
                    <Typography color={theme.palette.grey3.main}>Конверсия</Typography>
                </Box>
            </Box>
            <Box
                sx={{
                    mt: "auto",
                    display: "flex",
                    gap: "20px",
                }}
            >
                <CustomButton
                    variant="contained"
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                        width: "140px",
                    }}
                >
                    Заявки
                </CustomButton>
                <CustomButton
                    variant="outlined"
                    startIcon={<PencilIcon />}
                    sx={{
                        borderColor: theme.palette.brightPurple.main,
                        color: theme.palette.brightPurple.main,
                        px: "21px",
                        py: "9px",
                        width: "auto",
                        "& .MuiButton-startIcon": {
                            mr: "4px",
                        }
                    }}
                >
                    Редактировать
                </CustomButton>
                <CustomButton
                    variant="outlined"
                    startIcon={<ChartIcon />}
                    sx={{
                        borderColor: theme.palette.brightPurple.main,
                        color: theme.palette.brightPurple.main,
                        p: "9px",
                        width: "auto",
                        minWidth: 0,
                        "& .MuiButton-startIcon": {
                            mr: 0,
                            ml: 0,
                        }
                    }}
                />
                <IconButton
                    sx={{
                        color: theme.palette.brightPurple.main,
                        ml: "auto",
                    }}
                >
                    <MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
                </IconButton>
            </Box>
        </Box >
    );
}