import React from "react";
import { IconButton } from "@mui/material";
import { Brightness2 as MoonIcon, WbSunny as SunIcon } from "@mui/icons-material";
import { useApplicationTheme } from "../../hooks";

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;
