<template>
    <div class="home-view">
        <WebGLBackground />
        <div class="home-card">
            <div class="home-logo"><component :is="THEME_ICONS[theme]" class="w-12 h-12 text-accent" /></div>
            <h1>{{ THEME_NAMES[theme] }}</h1>
            <p class="home-sub">Don't Panic.</p>
            <RouterLink v-if="!isLoggedIn" to="/login" class="home-btn">Sign in →</RouterLink>
            <RouterLink v-else to="/agents" class="home-btn">Sign in →</RouterLink>
        </div>
    </div>
</template>

<script setup lang="ts">
import { THEME_ICONS, THEME_NAMES, useTheme } from '../composables/useTheme';
import WebGLBackground from "../components/WebGLBackground.vue";
import { auth } from "../store";
const { isLoggedIn } = auth;
const { theme } = useTheme();
</script>
