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


interface Props {
    name: string;
}

export default function ExpandableQuizBlock({ name }: Props) {
    const theme = useTheme();

    return (
        <Box
            sx={{

            }}
        >
            <Box
                sx={{
                    display: "flex",
                    alignItems: "center",
                }}
            >
                <Typography variant="h5" mb="5px">Название</Typography>
                <Box
                    sx={{
                        flexGrow: 1,
                        width: "auto",
                        height: "10px",
                        borderBottom: "1px solid #9A9AAF",
                        mx: "5px",
                        mb: "0px",
                    }}
                />
                <Typography color={theme.palette.grey3.main} mb="0px" >Все заявки проекта</Typography>
                <IconButton
                    sx={{
                        height: "32px",
                        ml: "10px",
                        p: 0,
                    }}
                ><ExpandIcon /></IconButton>
                <IconButton
                    sx={{
                        color: theme.palette.brightPurple.main,
                        ml: "16px",
                    }}
                >
                    <MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
                </IconButton>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    gap: "16px",
                    mt: "25px",
                }}
            >
                <CustomButton
                    variant="outlined"
                    sx={{
                        p: "9px",
                        flexGrow: 1,
                        borderColor: theme.palette.brightPurple.main,
                        backgroundColor: "#EEE4FC",
                        color: theme.palette.grey3.main,
                    }}
                >Квизов нет</CustomButton>
                <CustomButton
                    variant="contained"
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                        p: "10px",
                        width: "44px",
                        minWidth: "44px",
                    }}
                >+</CustomButton>
            </Box>
        </Box>
    );
}