<template>
  <div>
    <UPageHero
      :title="$t('hero.title')"
      :description="$t('hero.description')"
      :links="links"
    />
    <div class="flex justify-center mt-8">
      <CounterWidget v-if="isAuthenticated" />
      <UEmpty
        v-else
        icon="i-lucide-user-x"
        :title="$t('counter.notAuthenticated')"
        :description="$t('counter.signInToUse')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui'

const { isAuthenticated } = storeToRefs(useUser())

const { t } = useI18n()

const links = computed(() => [
  {
    label: t('hero.signUp'),
    to: '/login',
    icon: 'i-lucide-log-in'
  },
  {
    label: t('hero.profile'),
    to: '/profile',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
] as ButtonProps[])
</script>
