import {
  Alert,
  Box,
  CssBaseline,
  TextField,
  Typography,
  useColorScheme,
} from '@mui/material';
import './App.css';
import { useTranslation } from 'react-i18next';
import { LanguageManager } from './components/LanguageManager';

function App() {
  const { t } = useTranslation();

  return (
    <>
      <CssBaseline />
      <LanguageManager />
      <div style={{ padding: '16px' }}>
        <Typography variant="h3">{t('helloWorld')}</Typography>
        <Box
          sx={{ display: 'flex', flexDirection: 'column', gap: '10px', mt: 5 }}
        >
          <ThemeToggleButton />
          <Button color="secondary" variant="contained">
            secondary button
          </Button>
          <TextField label={t('helloWorld')} />
          <Alert severity="success" variant="filled">
            success
          </Alert>
          <Alert severity="warning" variant="filled">
            warning
          </Alert>
          <Alert severity="info" variant="filled">
            info
          </Alert>
          <Alert severity="error" variant="filled">
            error
          </Alert>
        </Box>
      </div>
    </>
  );
}

export default App;

import { Button } from '@mui/material';

export const ThemeToggleButton = () => {
  const { mode, setMode } = useColorScheme();

  return (
    <Button
      variant="contained"
      onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
    >
      Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
    </Button>
  );
};