// theme/ThemeToggle.tsx
import React from 'react';
import { IconButton, Tooltip } from '@mui/material';
import { Brightness4, Brightness7 } from '@mui/icons-material';
import { useThemeMode } from './ThemeContext';
import { useTranslation } from "react-i18next";

const ThemeToggle: React.FC = () => {
    const { mode, toggleMode } = useThemeMode();
    const { t } = useTranslation();

    return (
        <Tooltip title={mode === 'dark' ? t('lightMode') : t('darkMode')}>

        <IconButton
                onClick={toggleMode}
                color="inherit"
                sx={{
                    transition: 'transform 0.2s',
                    '&:hover': {
                        transform: 'scale(1.1)',
                    },
                }}
            >
                {mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
            </IconButton>
        </Tooltip>
    );
};

export default ThemeToggle;
