import React, { useContext } from "react";
import PropTypes from "prop-types";
import { HeaderThemeChooserContainer } from "./HeaderThemeChooser.styled";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import LightModeIcon from "@mui/icons-material/LightMode";
import { ColorModeContext } from "context/ColorModeContext";
import { DARK_THEME } from "constants/themeConstants";

const HeaderThemeChooser = () => {
  const themeCtx = useContext(ColorModeContext);

  const handleChangeTheme = () => {
    themeCtx?.changeTheme?.();
  };
  console.log(themeCtx)
  return (
    <HeaderThemeChooserContainer onClick={handleChangeTheme}>
      {themeCtx?.currentTheme === DARK_THEME ? <LightModeIcon /> : <DarkModeIcon />}
    </HeaderThemeChooserContainer>
  );
};

HeaderThemeChooser.propTypes = {
  children: PropTypes.node,
};

export default HeaderThemeChooser;