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

export interface CardStyleProps {
  userInfo?: boolean;
}

const createClasses = makeStyles<Theme, CardStyleProps>(theme => ({
  card: props => {
    const { userInfo } = props;

    return {
      minWidth: userInfo ? 280 : 245,
      minHeight: 114,
      padding: theme.spacing(2),
      '&:active, &:focus': {
        backgroundColor: theme.palette.secondary[100]
      },
      '& > .MuiGrid-root': {
        width: '100%'
      }
    };
  },
  icon: {
    transform: 'rotate(-90deg)'
  },
  gridItem1: {
    display: 'flex',
    justifyContent: 'end',
    flex: 1
  },
  title: {
    ...theme.typography.body2
  },
  number: {
    ...theme.typography.h2
  },
  link: {
    color: theme.palette.secondary[500],
    fontSize: 14,
    cursor: 'pointer'
  },
  userAvatar: {
    border: `${theme.spacing(1.5)} solid ${theme.palette.secondary[100]}`,
    borderRadius: '50%',
    marginRight: theme.spacing(2)
  },
  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: {
    flex: 1
  }
}));

export default createClasses;