import React from "react";
import { Renderer, svg } from "./renderers";
import "./icons";

export type IconProps = {
  icon: string;
  [key: string]: any;
}

type IconRendererProps = {
  children: React.ReactElement
  render: Renderer;
}

export const iconContext = React.createContext<Renderer>(svg);
const { Provider } = iconContext;

export const Icon: React.FunctionComponent<IconProps> = ({ icon, ...props }) => {
  const Icon = React.useContext(iconContext)(icon);
  return <Icon {...props} />;
};

export const IconRenderer: React.FunctionComponent<IconRendererProps> = ({ children, render }) => (
  <Provider value={render}>{children}</Provider>
);