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

interface ModalStyleProps {
  modalCustomBgImage?: string | undefined;
}

const createClasses = makeStyles<Theme, ModalStyleProps>(theme => ({
  avatar: {
    border: `${theme.spacing(1)} solid ${theme.palette.secondary[100]}`,
    marginBottom: theme.spacing(3)
  },
  videoModal: props => {
    const { modalCustomBgImage } = props;
    return {
      backgroundImage: modalCustomBgImage ? `url(${modalCustomBgImage})` : 'none',
      padding: `${theme.spacing(3)} ${theme.spacing(3)} 0`
    };
  },
  modal: {
    width: '432px'
  },
  video: {
    marginTop: theme.spacing(3),
    marginBottom: theme.spacing(3)
  },
  icon: {
    padding: 0
  },
  button: {
    justifyContent: 'center'
  }
}));

export default createClasses;