import { CreateThemeConfig } from "design-system/tools/createTheme";
import { createContext, useMemo } from "react";
import { useStore } from "store";
import { customTheme } from "theme.config";

export const ThemeContext = createContext<CreateThemeConfig | null>(null);

export function useInternalTheme() {
  const mode = useStore((s) => s.theme);
  const theme = customTheme;
  if (!theme) {
    throw new Error("No Theme found");
  }
  const { colors, ...rest } = theme;

  return useMemo(() => ({ colors: theme.colors[mode], ...rest }), [mode, rest, theme.colors]);
}