<script setup lang="ts">
const { $i18n } = useNuxtApp()
const t = $i18n.t
</script>

<template>
  <UDashboardPanel id="changelog-panel" grow>
    <UDashboardNavbar :title="t('nav.changelog')">
      <template #leading>
        <UDashboardSidebarCollapse />
      </template>
    </UDashboardNavbar>

    <div class="overflow-y-auto flex-1">
      <div class="max-w-2xl mx-auto p-6 space-y-10">
        <div v-for="release in releases" :key="release.version" class="relative pl-6 border-l-2 border-default">
          <!-- Dot en la línea de tiempo -->
          <div class="absolute -left-[5px] top-1 w-2 h-2 rounded-full bg-primary" />

          <!-- Cabecera del release -->
          <div class="mb-3">
            <div class="flex items-center gap-2 flex-wrap">
              <UBadge color="primary" variant="soft" size="sm">
                v{{ release.version }}
              </UBadge>
              <span class="text-xs text-muted">{{ release.date }}</span>
            </div>
            <h2 class="text-base font-semibold text-highlighted mt-1">
              {{ release.title }}
            </h2>
            <p v-if="release.description" class="text-sm text-muted mt-0.5">
              {{ release.description }}
            </p>
          </div>

          <!-- Lista de cambios -->
          <ul class="space-y-2">
            <li
              v-for="(change, i) in release.changes"
              :key="i"
              class="flex items-start gap-2 text-sm"
            >
              <UBadge
                :color="typeConfig[change.type].color as any"
                variant="subtle"
                size="xs"
                class="mt-0.5 shrink-0"
              >
                {{ typeConfig[change.type].label }}
              </UBadge>
              <span class="text-default">{{ change.text }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </UDashboardPanel>
</template>
