<script setup lang="ts">
/**
 * User profile page.
 *
 * Displays user info, linked accounts, and logout option.
 */
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()

function logout() {
  auth.logout()
}
</script>

<template>
  <div class="p-4 md:p-6">
    <h1 class="mb-6 text-2xl font-bold">
      Profile
    </h1>

    <div class="max-w-md space-y-6">
      <!-- Avatar and Name -->
      <div class="flex items-center gap-4">
        <div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-2xl">
          {{ auth.user?.displayName?.charAt(0) || '?' }}
        </div>
        <div>
          <div class="text-lg font-semibold">
            {{ auth.user?.displayName || 'Unknown' }}
          </div>
          <div class="text-sm text-gray-500">
            Player
          </div>
        </div>
      </div>

      <!-- Linked Accounts -->
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 font-semibold">
          Linked Accounts
        </h2>
        <div class="text-sm text-gray-500">
          <!-- TODO: Display linked OAuth accounts -->
          No linked accounts information available
        </div>
      </div>

      <!-- Logout -->
      <button
        class="w-full rounded bg-red-600 px-4 py-2 text-white hover:bg-red-700"
        @click="logout"
      >
        Logout
      </button>
    </div>
  </div>
</template>
