<template>
  <section class="screen-centered">
    <Card :card="card" :isFaceUp="isFaceUp" showPlayButtonFaceUp @click="clickOnSlugCard" @image-loaded="imageLoaded" />
  </section>
</template>

<script setup lang="ts">
import type { Card } from '~~/types/types'
const route = useRoute()
const slug = route.params.slug as string
const isFaceUp = ref(false)

const { data: card, pending, error } = await useFetch<Card>(`/api/card/${slug}`)

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

const clickOnSlugCard = () => {
  //
}

const imageLoaded = () => {
  console.log('imageLoaded')
}

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