import React, { useEffect } from 'react';
import { useAuth } from '../../hooks/useAuth';
import { Box, Typography, CircularProgress } from '@mui/material';

const Logout = () => {
  const { logout } = useAuth();

  useEffect(() => {
    const performLogout = async () => {
      try {
        await logout();
        // navigation is now handled inside logout()
      } catch (error) {
        console.error('Logout error:', error);
        // navigation fallback is handled in useAuth.js
      }
    };

    performLogout();
  }, [logout]);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: 8 }}>
      <Typography variant="h6" gutterBottom>
        Logging out...
      </Typography>
      <CircularProgress />
    </Box>
  );
};

export default Logout;