import React, { createContext, useContext, ReactNode } from 'react';

import { QwikTheme, qwikTheme } from './tokens';

const ThemeContext = createContext<QwikTheme>(qwikTheme);

export const ThemeProvider = ({
  children,
  theme = qwikTheme,
}: {
  children: ReactNode;
  theme?: QwikTheme;
}) => {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
};

export const useTheme = () => useContext(ThemeContext);