import {
  CSSProperties,
  FC,
  PropsWithChildren,
  createContext,
  useState,
} from "react";

interface IStyleContext {
  style: CSSProperties | undefined;
  setStyle: (css: CSSProperties | undefined) => void;
}
export const StyleContext = createContext<IStyleContext | undefined>(undefined);

interface IStyleProviderProps {
  defaultCss?: CSSProperties;
}
export const StyleProvider: FC<PropsWithChildren<IStyleProviderProps>> = ({
  children,
  defaultCss = {},
}) => {
  const [style, setStyle] = useState<CSSProperties | undefined>(defaultCss);

  return (
    <StyleContext.Provider value={{ style, setStyle }}>
      {children}
    </StyleContext.Provider>
  );
};
