import { Button, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme: Theme) => {
  return ({
    submitButton: {
      marginRight: theme.spacing(1)
    }
  })
})

interface Props {
  submitDisabled?: boolean;
  onSubmit?: () => void;
  onCancel?: () => void;
  submitText?: string;
}

export default function CancelSubmit(props: Props) {
  const { submitDisabled, onSubmit, onCancel, submitText } = props;
  const classes = useStyles();

  return (
    <>
    <Button onClick={onCancel} color="primary" aria-label="Cancel">
      <Typography variant="subtitle2" color="textPrimary">
        Cancel
      </Typography>
    </Button>
    <Button
      disabled={submitDisabled}
      onClick={onSubmit}
      className={classes.submitButton} 
    >
      <Typography variant="subtitle2" color={ submitDisabled ? "disabled" : "primary"}>
        {submitText ? submitText : "Submit"}
      </Typography>
    </Button>
    </>
  )
}