import Brightness7Icon from "@mui/icons-material/Brightness7";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import { IconButton, Tooltip } from "@mui/material";
import { useDarkTheme } from "../hooks/context_providers/DarkThemeProvider";

export function DarkThemeButton(): React.ReactElement {
  const darkTheme = useDarkTheme();

  return (
    <Tooltip title="Activer / désactiver le mode sombre">
      <IconButton
        onClick={() => darkTheme.setEnabled(!darkTheme.enabled)}
        style={{ color: "inherit" }}
      >
        {!darkTheme.enabled ? <DarkModeIcon /> : <Brightness7Icon />}
      </IconButton>
    </Tooltip>
  );
}