import React, { ReactNode } from 'react';

import { ThemeProvider } from '@mui/material';
import createTheme from '@mui/material/styles/createTheme';

import { black, carbon, gray, pink, red, teal } from './colors';

export const KompaThemeProvider: React.FC<{ children: ReactNode }> = ({
  children,
}) => {
  return <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>;
};

const defaultTheme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 820,
      lg: 1200,
      xl: 1536,
    },
  },
  components: {
    MuiButton: {
      defaultProps: {
        disableElevation: true,
      },
      styleOverrides: {
        root: { minHeight: 44, borderRadius: 5 },
      },
    },
  },
  typography: {
    body1: {
      color: black[700],
      fontFamily: 'Lato',
      fontWeight: '400',
      fontSize: 16,
      letterSpacing: 0.5,
    },
    button: {
      textTransform: 'none',
      fontWeight: '700',
      fontFamily: 'Titillium Web',
      letterSpacing: 1,
    },
    h1: {
      fontFamily: 'Titillium Web',
      fontWeight: '600',
      fontSize: 28,
      color: black[700],
    },
    h2: {
      fontFamily: 'Titillium Web',
      fontWeight: '600',
      fontSize: 24,
      color: black[700],
    },
    h3: {
      fontFamily: 'Titillium Web',
      fontWeight: '600',
      fontSize: 20,
      color: black[700],
    },
  },
  palette: {
    primary: {
      300: teal[300],
      main: teal.main,
      500: teal[500],
      600: teal[600],
      700: teal[700],
    },
    secondary: {
      300: pink[300],
      main: pink.main,
      500: pink[500],
      600: pink[600],
      700: pink[700],
    },
    error: {
      300: red[300],
      main: red.main,
      500: red[500],
      600: red[600],
      700: red[700],
    },
    neutral: {
      300: gray[300],
      main: gray.main,
      500: gray[500],
      600: gray[600],
      700: gray[700],
    },
    neutralVariant: {
      300: carbon[300],
      main: carbon.main,
      500: carbon[500],
      600: carbon[600],
      700: carbon[700],
    },
  },
});
