<template>
  <section class="flex justify-center items-center h-screen">
    <div class="aspect-square size-[100vmin] max-h-screen max-w-screen overflow-hidden">
      <Platine :card="card" />
    </div>
  </section>
</template>

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

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

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