import { ThemeProvider, Global } from '@emotion/react';
import css from '@styled-system/css';
import React from 'react';
import { theme as defaultTheme } from './theme';

type PrimerProviderProps = {
  theme?: typeof defaultTheme;
  children?: React.ReactNode;
};

export function PrimerProvider({
  theme = defaultTheme,
  children,
}: PrimerProviderProps) {
  return (
    <ThemeProvider theme={theme}>
      {/* NOTE: Global styles might cause issues */}
      <Global
        styles={css({
          body: {
            margin: 0,
            color: 'text.primary',
            bg: 'bg.canvas',
            fontFamily: 'normal',
            lineHeight: 'default',
          },
        })}
      />
      {children}
    </ThemeProvider>
  );
}