"use client";

import { Logo } from './logo';

export const LoadingScreen = () => {
    // We might not have settings here, so we provide a default t function.
    // This avoids a circular dependency where AuthProvider -> LoadingScreen -> useSettings,
    // but SettingsProvider needs AuthProvider.
    const t = (key: string, options?: any) => options?.defaultValue || key;

    return (
        <div className="h-screen w-screen flex items-center justify-center bg-background text-foreground">
            <div className="flex flex-col items-center gap-4">
                <div className="animate-pulse">
                    <Logo />
                </div>
                <p className="text-muted-foreground">
                    {t('loadingSecureSession', { defaultValue: 'Loading Secure Session...' })}
                </p>
            </div>
        </div>
    );
};