import { Tooltip, useTheme } from "@mui/material";
import DarkThemeIcon from "@mui/icons-material/Brightness3"
import LightThemeIcon from "@mui/icons-material/Brightness7";
import classNames from "classnames";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles(() => ({
    darkThemeIcon: {
        // borderRadius: "50%",
        // padding: "1px",
        // backgroundColor: "#003366",
        color: "#fefcd7 !important"
    },
    lightThemeIcon: {
        color: "#fdb813 !important"
    }
}));

export default function ThemeIcon() {
    const classes = useStyles();
    const theme = useTheme();

    const lightThemeIcon = () => (
        <DarkThemeIcon className={classNames(classes.darkThemeIcon)} fontSize="small" />
    );

    const darkThemeIcon = () => (
        <LightThemeIcon className={classNames(classes.lightThemeIcon)} fontSize="small" />
    );

    if (theme.palette.mode === "light") {
        return (
            <Tooltip title="Switch to Dark Theme" >
                {darkThemeIcon()}
            </Tooltip>
        );
    } else {
        return (
            <Tooltip title="Switch to Light Theme" >
                {lightThemeIcon()}
            </Tooltip>
        );
    }
}
