<template>
  <section class="screen-centered">
    <Card :card="card" :isFaceUp="isFaceUp" @click="clickOnSlugCard" />
  </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 = () => {
  isFaceUp.value = true
  const audio = new Audio(card.value?.url_audio)
  audio.play()
}

onMounted(() => {
  setTimeout(() => {
    clickOnSlugCard()
  }, 700)
})
</script>

<style>
.screen-centered {
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100dvw;
  display: grid;
  place-items: center;
}
</style>
