<!-- pages/members/index.vue -->
<template>
  <UDashboard>
    <UDashboardPanel>
      <UDashboardHeader>
        <template #title> Welcome back, {{ member?.name }}! </template>
      </UDashboardHeader>

      <UGrid :cols="2" class="gap-4">
        <UCard>
          <template #header>Your Circle</template>
          <p class="text-xl font-semibold">{{ member?.circle }}</p>
          <UButton variant="soft" size="sm" class="mt-2">
            Request Circle Change
          </UButton>
        </UCard>

        <UCard>
          <template #header>Your Contribution</template>
          <p class="text-xl font-semibold">
            ${{ member?.contributionTier }}/month
          </p>
          <p class="text-sm text-gray-600">Supporting 2 solidarity spots</p>
          <UButton variant="soft" size="sm" class="mt-2">
            Adjust Contribution
          </UButton>
        </UCard>
      </UGrid>

      <UCard class="mt-6">
        <template #header>Quick Links</template>
        <UList>
          <li><NuxtLink to="/members/resources">Resource Library</NuxtLink></li>
          <li><a href="https://gamma-space.slack.com">Slack Community</a></li>
          <li><NuxtLink to="/members/events">Upcoming Events</NuxtLink></li>
        </UList>
      </UCard>
    </UDashboardPanel>
  </UDashboard>
</template>
