import React from "react";
import { IconButton, Tooltip } from "@mui/material";
import { Brightness4, Brightness7 } from "@mui/icons-material";
import { useThemeMode } from "../contexts/ThemeContext";

interface ThemeToggleProps {
  size?: "small" | "medium" | "large";
  sx?: any;
}

export const ThemeToggle: React.FC<ThemeToggleProps> = ({
  size = "medium",
  sx,
}) => {
  const { mode, toggleColorMode } = useThemeMode();

  return (
    <Tooltip title={`Switch to ${mode === "light" ? "dark" : "light"} mode`}>
      <IconButton
        onClick={toggleColorMode}
        color="inherit"
        size={size}
        sx={sx}
        aria-label="toggle color mode"
      >
        {mode === "light" ? <Brightness4 /> : <Brightness7 />}
      </IconButton>
    </Tooltip>
  );
};