/**
 * Wrapper around material-ui's Button component that styles it with
 * Bitburner's UI theme
 */

import React from "react";
import { Button, ButtonProps, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  // Tries to emulate StdButton in buttons.scss
  root: {
    backgroundColor: "#555",
    border: "1px solid #333",
    color: "white",
    margin: "5px",
    padding: "3px 5px",
    "&:hover": {
      backgroundColor: "#666",
    },
  },
  textPrimary: {
    color: "rgb( 144, 202, 249)",
  },
  textSecondary: {
    color: "rgb(244, 143, 177)",
  },
  disabled: {
    backgroundColor: "#333",
    color: "#fff",
    cursor: "default",
  },
});

export const MuiButton: React.FC<ButtonProps> = (props: ButtonProps) => {
  return (
    <Button
      {...props}
      classes={{
        ...useStyles(),
        ...props.classes,
      }}
    />
  );
};