import React from 'react';
import PropTypes from 'prop-types';
import {css, Global} from '@emotion/react';
import {ThemeProvider as MuiThemeProvider} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import createCache from '@emotion/cache';

import theme from '..';

export const createEmotionCache = () => createCache({key: 'css'});

const ThemeProvider = ({children}) => (
  <>
    <Global
      styles={css`
        *,
        *::after,
        *::before {
          box-sizing: border-box;
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          font-smoothing: antialiased;
        }

        html,
        body,
        #__next {
          height: 100%;
          display: flex;
          flex-direction: column;
        }

        img,
        svg {
          display: block;
        }
      `}
    />
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  </>
);

ThemeProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

export default ThemeProvider;