import { Delete } from "@mui/icons-material";
import { Theme, Button, ButtonProps } from "@mui/material";
import { red } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme: Theme) => ({
  deleteButton: {
    color: "#fff",
    background: red["500"],
    "&:hover": {
      background: red["600"]
    }
  },
  rightIcon: {
    marginLeft: theme.spacing(1)
  }
}));

const DeleteButton = (props: ButtonProps) => {
  const classes = useStyles();

  return (
    <Button
      variant="contained"
      size="small"
      {...props}
      className={classes.deleteButton}
      aria-label="Delete">
      {props.children}
      <Delete className={classes.rightIcon} fontSize="small" />
    </Button>
  );
};

export default DeleteButton;
