import React from 'react'
import { ChakraProvider as ChacraProv, createSystem, defaultConfig } from '@chakra-ui/react'
import type { PropsWithChildren } from 'react'

const ChacraProvider: React.ElementType = ChacraProv

const system = createSystem(defaultConfig, {
  globalCss: {
    body: {
      colorPalette: 'teal',
    },
    '.markdown-preview': {
      '& h1': {
        fontSize: '2xl',
        fontWeight: 'bold',
        marginTop: '4',
        marginBottom: '2',
      },
      '& h2': {
        fontSize: 'xl',
        fontWeight: 'bold',
        marginTop: '3',
        marginBottom: '2',
      },
      '& h3': {
        fontSize: 'lg',
        fontWeight: 'semibold',
        marginTop: '2',
        marginBottom: '1',
      },
      '& p': {
        marginBottom: '2',
      },
      '& ul, & ol': {
        marginLeft: '4',
        marginBottom: '2',
      },
      '& code': {
        backgroundColor: 'gray.100',
        padding: '0.125rem 0.25rem',
        borderRadius: 'sm',
        fontSize: 'sm',
        fontFamily: 'monospace',
      },
      '& pre': {
        backgroundColor: 'gray.100',
        padding: '3',
        borderRadius: 'md',
        marginBottom: '2',
        overflowX: 'auto',
      },
      '& pre code': {
        backgroundColor: 'transparent',
        padding: '0',
      },
    },
  },
  theme: {
    tokens: {
      fonts: {
        body: { value: 'var(--font-outfit)' },
      },
    },
    semanticTokens: {
      radii: {
        l1: { value: '0.5rem' },
        l2: { value: '0.75rem' },
        l3: { value: '1rem' },
      },
    },
  },
})

export const Provider = (props: PropsWithChildren) => (
  <ChacraProvider value={system}>
    {props.children}
  </ChacraProvider>
)