import React, { ReactNode } from "react";

import { useThemeContext } from "../context";
import { themes } from "../types";

interface ToggleThemeProps {
  toggleTheme: (theme: string) => void;
  classNames?: string;
  children?: ReactNode;
}

export const ToggleTheme: React.FC<ToggleThemeProps> = (
  props: ToggleThemeProps
) => {
  const { theme, changeTheme } = useThemeContext();
  return (
    <div
      className={props.classNames}
      onClick={() => {
        changeTheme(theme === themes.dark ? themes.light : themes.dark);
      }}
    >
      {props.children}
    </div>
  );
};