import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useAppSelector } from '../stores/hooks';
import Head from 'next/head';
import { getPageTitle } from '../config';

export default function IndexPage() {
    const { currentUser } = useAppSelector((state) => state.auth);
    const router = useRouter();

    useEffect(() => {
        if (currentUser) {
            router.push('/dashboard');
        } else {
            router.push('/login');
        }
    }, [currentUser, router]);

    return (
        <div className="min-h-screen bg-gray-100 flex items-center justify-center">
            <Head>
                <title>{getPageTitle('Loading...')}</title>
            </Head>
            <div className="flex flex-col items-center gap-4">
                <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
                <p className="text-gray-500 font-medium">Redirecting to system...</p>
            </div>
        </div>
    );
}
