<template>
  <div class="flex flex-col grow p-1 w-full text-center">
    <div class="flex flex-col grow gap-16 justify-center md:mt-16">
      <div>
        {{ t('gameDescription') }}<br>
        <br>
      </div>
      <!-- Daily -->
      <div class="flex flex-col gap-4 items-center">
        <RouterLink
          to="/daily"
          class="text-2xl btn">
          {{ t('dailyGame') }}
        </RouterLink>
        <span v-html="t('dailyDescription')">

        </span>
      </div>

      <!-- Random -->
      <div class="flex flex-col gap-4 items-center">
        <RouterLink
          to="/random"
          class="text-2xl btn">
          {{ t('randomGame') }}
        </RouterLink>
        {{ t('randomDescription') }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>
