<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Navigation -->
    <nav class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <NuxtLink
              to="/"
              class="text-xl font-bold text-gray-900 dark:text-white"
            >
              Ghost Guild Wiki
            </NuxtLink>
            <div class="ml-10 flex space-x-4">
              <NuxtLink
                to="/articles"
                class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md"
              >
                Articles
              </NuxtLink>
              <NuxtLink
                v-if="isAuthenticated"
                to="/articles/new"
                class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md"
              >
                New Article
              </NuxtLink>
            </div>
          </div>

          <div class="flex items-center space-x-4">
            <div v-if="isAuthenticated" class="flex items-center space-x-4">
              <span class="text-gray-700 dark:text-gray-300">{{
                user?.displayName
              }}</span>
              <button
                @click="logout"
                class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
              >
                Logout
              </button>
            </div>
            <button
              v-else
              @click="login"
              class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
            >
              Login
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <slot />
    </main>
  </div>
</template>

<script setup>
const { user, isAuthenticated, login, logout } = useAuth();
</script>
