'use client';

import { ChakraProvider, createSystem, defaultConfig, Theme } from '@chakra-ui/react';
import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';

export function Provider(props: ColorModeProviderProps) {
  const system = createSystem(defaultConfig, {
    theme: {
      tokens: {
        colors: {
          cyan: {
            400: {
              value: {
                base: '#0c5c72',
                _dark: '#67e8f9'
              } as any // todo: find a better way to overwrite it
            }
          }
        }
      }
    }
  });

  return (
    <ChakraProvider value={system}>
      <Theme colorPalette="cyan">
        <ColorModeProvider defaultTheme="dark">{props.children}</ColorModeProvider>
      </Theme>
    </ChakraProvider>
  );
}