<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSettingsStore, PAGE_SIZE_OPTIONS } from '~/stores/settings'

const { $i18n } = useNuxtApp()
const t = $i18n.t

const settings = useSettingsStore()
const { pageSize, paginationType } = storeToRefs(settings)

const pageSizeItems = PAGE_SIZE_OPTIONS.map(n => ({
  value: n,
  label: `${n} ${t('settings.results')}`
}))

const paginationItems = [
  {
    value: 'infinite_scroll' as const,
    label: t('settings.infinite_scroll'),
    description: t('settings.infinite_scroll_desc')
  },
  {
    value: 'numbered' as const,
    label: t('settings.numbered'),
    description: t('settings.numbered_desc')
  }
]
</script>

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

    <div class="overflow-y-auto flex-1 p-6 space-y-8 max-w-lg">
      <!-- Resultados por búsqueda -->
      <div>
        <p class="text-sm font-semibold text-highlighted mb-1">
          {{ t('settings.page_size_title') }}
        </p>
        <p class="text-xs text-muted mb-4">{{ t('settings.page_size_desc') }}</p>
        <URadioGroup v-model="pageSize" :items="pageSizeItems" />
      </div>

      <USeparator />

      <!-- Tipo de paginación -->
      <div>
        <p class="text-sm font-semibold text-highlighted mb-1">
          {{ t('settings.pagination_title') }}
        </p>
        <p class="text-xs text-muted mb-4">{{ t('settings.pagination_desc') }}</p>
        <URadioGroup v-model="paginationType" :items="paginationItems" />
      </div>
    </div>
  </UDashboardPanel>
</template>
