<script>
  import { onMount } from 'svelte';
  import Router from 'svelte-spa-router';
  import Navbar from './lib/Navbar.svelte';
  import Footer from './lib/Footer.svelte';
  import MyDecks from './routes/MyDecks.svelte';
  import CreateDeck from './routes/CreateDeck.svelte';
  import EditDeck from './routes/EditDeck.svelte';
  import DeckPreview from './routes/DeckPreview.svelte';
  import DeckReviews from './routes/DeckReviews.svelte';
  import Community from './routes/Community.svelte';
  import CommunityUser from './routes/CommunityUser.svelte';
  import Settings from './routes/Settings.svelte';
  import { auth } from './lib/stores/auth.js';

  const routes = {
    '/': MyDecks,
    '/decks/new': CreateDeck,
    '/decks/:id/edit': EditDeck,
    '/decks/:id/preview': DeckPreview,
    '/decks/:id/reviews': DeckReviews,
    '/community': Community,
    '/community/user/:id': CommunityUser,
    '/settings': Settings,
  };

  onMount(() => {
    auth.init();
  });
</script>

<Navbar />
<main class="main">
  <Router {routes} />
</main>
<Footer />

<style>
  .main {
    flex: 1;
    width: 100%;
  }
</style>
