import React from "react";
import { IconButton } from "@material-ui/core";
import {
  Brightness2 as MoonIcon,
  WbSunny as SunIcon
} from "@material-ui/icons";
import { useApplicationTheme } from "../../providers/ThemeProvider";

const LightDarkToggle = () => {
  const { isDark, onDarkModeChanged } = useApplicationTheme();

  const handleChange = () => onDarkModeChanged(!isDark);

  return (
    <IconButton
      aria-label="light-dark-toggle"
      color="inherit"
      onClick={handleChange}
    >
      {isDark ? <SunIcon /> : <MoonIcon />}
    </IconButton>
  );
};

export default LightDarkToggle;