import React, { FC } from 'react';
import { theme as chakraTheme, ChakraProvider, extendTheme } from '@chakra-ui/react';

const baseTheme = extendTheme(
  {
    colors: {
      // 自定义 toast success 背景色
      toast: {
        200: '#fff',
        500: 'rgb(32, 33, 35)',
      },
      blue: {
        500: '#3461FF',
      },
    },
    styles: {
      global: () => ({
        body: {
          color: '#595959',
        },
        '.anticon svg': {
          display: 'inline-block',
          verticalAlign: 'unset',
        },
        img: {
          display: 'unset',
          verticalAlign: 'unset',
        },
        a: {
          color: '#3461FF',
        },
      }),
    },
  },
  chakraTheme,
);

const AppProvider: FC = ({ children }) => (
  <ChakraProvider theme={baseTheme} portalZIndex={1500}>
    {children}
  </ChakraProvider>
);

export default AppProvider;