<script lang="ts">
  import { LoginForm, Dashboard } from './lib/components';
  import { authStore } from './lib/stores';

  const auth = $derived($authStore);

  function handleLoginSuccess() {
    console.log('Login exitoso!', auth.user);
  }

  function handleLogout() {
    authStore.logout();
  }
</script>

{#if !auth.isAuthenticated}
  <!-- Mostrar formulario de login si no está autenticado -->
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4">
    <div class="max-w-4xl mx-auto">
      <LoginForm onSuccess={handleLoginSuccess} />
    </div>
  </div>
{:else}
  <!-- Mostrar Dashboard cuando está autenticado -->
  <Dashboard 
    username={auth.user?.username || 'Usuario'}
    onLogout={handleLogout}
  />
{/if}
