import { cn } from "tailwind-variants";
import { ThemeContext } from "./ThemeContext";
import { ReactNode } from "react";

type ThemeProps = {
  theme?: "light" | "dark";
  children?: ReactNode;
};

export const Theme = (props: ThemeProps) => {
  const { theme = "light", children } = props;
  const themeCls = cn(theme, "brand-default") as string;
  return (
    <ThemeContext.Provider value={{ themeCls }}>
      <div className={themeCls}>{children}</div>
    </ThemeContext.Provider>
  );
};