import React from 'react';
import { useAuth } from '../auth/AuthProvider';
import { AdminProvider } from '../context/AdminContext';
import Shell from '../components/Shell';
import SignInOverlay from '../components/SignInOverlay';
import Dashboard from '../components/Dashboard';

export default function App() {
    const { authState } = useAuth();

    switch (authState) {
        case 'active':
            return (
                <AdminProvider>
                    <Dashboard />
                </AdminProvider>
            );
        case 'authenticating':
            return (
                <Shell>
                    <div className="loading-container">
                        <div className="spinner"></div>
                        <p>Signing in…</p>
                    </div>
                </Shell>
            );
        case 'needsRegistration':
        case 'error':
        case 'unauthenticated':
        default:
            return (
                <Shell>
                    <SignInOverlay />
                </Shell>
            );
    }
}
