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

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",
        }}
      >
        <Button
          variant="outlined"
          sx={{
            backgroundColor: "#EEE4FC",
            color: theme.palette.grey3.main,
            width: "100%",
          }}
        >
          Quiz нет
        </Button>
        <Button
          variant="contained"
          sx={{
            backgroundColor: theme.palette.brightPurple.main,
            p: "10px",
            width: "44px",
            minWidth: "44px",
          }}
        >
          +
        </Button>
      </Box>
    </Box>
  );
}