import { Palette, Theme } from '@mui/material';
import { TypographyOptions } from '@mui/material/styles/createTypography';

declare module '@mui/material/styles' {
  interface TypographyVariants {
    '404': React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    '404'?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    '404': true;
  }
}

const typography = (theme: Theme): TypographyOptions | ((palette: Palette) => TypographyOptions) => ({
  '404': {
    fontSize: '6rem',
    [theme.breakpoints.up('sm')]: {
      fontSize: '12rem',
    },
    [theme.breakpoints.up('md')]: {
      fontSize: '18rem',
    },
  },
});

export default typography;
