import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Layout from '../components/Layout';

export default function Logout() {
  const router = useRouter();

  useEffect(() => {
    // Clear the auth token
    localStorage.removeItem('auth_token');
    
    // Redirect to login after a short delay
    setTimeout(() => {
      router.push('/login');
    }, 2000);
  }, [router]);

  return (
    <Layout user={null}>
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="text-6xl mb-4">👋</div>
          <h2 className="text-2xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
            Signing you out...
          </h2>
          <p style={{ color: 'var(--text-secondary)' }}>
            You will be redirected to the login page shortly.
          </p>
          <div className="mt-4">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto" style={{ borderColor: 'var(--text-accent)' }}></div>
          </div>
        </div>
      </div>
    </Layout>
  );
}