import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';

export interface ClassesProps {
  color: string;
}

const createClasses = makeStyles<Theme, ClassesProps>(theme => ({
  root: {},
  progress: {
    width: '100%',
    height: '8px',
    borderRadius: theme.spacing(1)
  },
  text: {
    color: theme.palette.primary[400],
    fontSize: theme.spacing(1.5)
  },
  bar1Determinate: props => {
    const { color } = props;
    return {
      backgroundColor: color
    };
  },
  marginTop: {
    marginTop: theme.spacing(1.75)
  },
  marginBottom: {
    marginBottom: theme.spacing(1.75)
  },
  rightText: {
    width: '36px',
    marginLeft: theme.spacing(1)
  },
  leftText: {
    width: '36px',
    marginRight: theme.spacing(1)
  }
}));

export default createClasses;