<template>
  <PlayingCard :card :isFaceUp />
</template>

<script setup lang="ts">
import type { Card } from '~~/types/types'

const { data: card, pending, error } = await useFetch<Card>('/api/card/random')

const isFaceUp = ref(false)

useHead({
  title: computed(() =>
    card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
  )
})

onMounted(() => {
  setTimeout(() => {
    isFaceUp.value = true
  }, 700)
})
</script>