import { makeStyles } from '@mui/styles';
import { orange, lightBlue, red, grey } from '@mui/material/colors';

const styles = {
  R: {
    color: '#fff',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: red[700],
    backgroundColor: red[500],
  },
  O: {
    color: '#000',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: orange[600],
    backgroundColor: orange[500],
  },
  W: {
    color: '#000',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: grey[300],
    backgroundColor: grey[50],
  },
  B: {
    color: '#fff',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: lightBlue[700],
    backgroundColor: lightBlue[500],
  },
};

const useStyles = makeStyles(styles);

export { styles, useStyles };