src/components/UI/ThemeToggle.jsx

import React, { useCallback } from 'react';
import { IconButton, Tooltip, useTheme as useMuiTheme } from '@mui/material';
import { Brightness4, Brightness7 } from '@mui/icons-material';
import { useTheme } from '../../hooks/useTheme'; 

const ThemeToggle = ({ size = 'medium' }) => {
  const { toggleTheme, isDark } = useTheme();
  const theme = useMuiTheme();

  const handleToggle = useCallback(() => {
    toggleTheme();
  }, [toggleTheme]);

  return (
    <Tooltip title={`Switch to ${isDark ? 'light' : 'dark'} mode`}>
      <IconButton
        onClick={handleToggle}
        color="inherit"
        size={size}
        aria-label="toggle theme"
        sx={{
          transition: 'transform 0.3s ease',
          '&:hover': {
            transform: 'rotate(15deg)'
          }
        }}
      >
        {isDark ? (
          <Brightness7 sx={{ color: theme.palette.warning?.main || '#ffc107' }} />
        ) : (
          <Brightness4 sx={{ color: theme.palette.grey[600] }} />
        )}
      </IconButton>
    </Tooltip>
  );
};

export default ThemeToggle;