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

const createClasses = makeStyles<Theme>(theme => ({
  container: {
    flexWrap: 'nowrap',
    marginBottom: theme.spacing(5)
  },
  userAvatar: {
    border: `${theme.spacing(1.5)} solid ${theme.palette.secondary[100]}`,
    borderRadius: '50%',
    marginRight: theme.spacing(1)
  },
  name: {
    ...theme.typography.h3,
    color: theme.palette.primary[500]
  },
  userRole: {
    ...theme.typography.interactive2,
    color: theme.palette.primary[400],
    paddingTop: theme.spacing(0.5)
  },
  userEmail: {
    ...theme.typography.interactive2,
    color: theme.palette.secondary[500],
    paddingTop: theme.spacing(1),
    textDecoration: 'none',
    '&:hover': {
      textDecoration: 'none'
    }
  },
  userInfo: {
    cursor: 'pointer'
  },
  statusContainer: {
    paddingTop: theme.spacing(1),
    alignItems: 'center',
    '& .MuiAvatar-root': {
      width: 16,
      height: 16
    },
    '& .MuiTypography-root': {
      color: theme.palette.primary[400],
      ...theme.typography.caption1
    }
  },
  statusWithBadge: {
    '& .MuiTypography-root': {
      color: theme.palette.primary[500]
    }
  }
}));

export default createClasses;