import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";

import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

export default function DiscountButtons() {
  const theme = useTheme();
  return (
    <Box sx={{ ml: "40px" }}>
      <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
        <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
          Скидка
        </Typography>
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
          <DeleteIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
      </Box>
      <Box
        component="div"
        sx={{ display: "flex", gap: "8px", flexWrap: "wrap", mb: "20px" }}
      >
        <Button
          variant="contained"
          sx={{
            color: "#9A9AAF",
            backgroundColor: "#F2F3F7",
            border: "1px solid #9A9AAF",
          }}
        >
          10000
        </Button>
        <Button
          variant="contained"
          sx={{
            color: "#FFFFFF",
            backgroundColor: theme.palette.brightPurple.main,
            border: "1px solid #9A9AAF",
          }}
        >
          ₽
        </Button>
        <Button
          variant="contained"
          sx={{
            color: theme.palette.grey2.main,
            backgroundColor: theme.palette.background.default,
            border: "1px solid #9A9AAF",
          }}
        >
          %
        </Button>
      </Box>
    </Box>
  );
}
