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

    const route = useRoute()
    const playerId = route.params.id

    const user = useSupabaseUser()
    const client = useSupabaseClient()

    console.log('current user:', user)

    const { data: player, pending, error } = await useAsyncData<Player | null>(
        'players', 
        async () => {
            const { data } = await client.from('players')
            .select('*,rarity!inner(*)')
            .eq('id', playerId)
            .single()

            console.log(`player:`, data)
            return data
        },
        {
            lazy: true,
            server: false
        }
    )

</script>

<template>
    <h2>Get One Card!</h2>
    <div>
        <div v-if="pending">Loading...</div>
        <div v-else-if="error">Failed to load player</div>
        <div v-else-if="!player">No playler found</div>
        <div v-else>
            <Player :player="player" />
        </div>
    </div>
</template>