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

    const config = useRuntimeConfig()

    const { data, pending, error } = await useFetch<Player[]>(
        `${config.public.supabaseUrl}/random_player`,
        {
            method: 'GET',
            headers: {
                apikey: config.public.supabaseKey
            },
            server: false,
            query: {
                select: '*,rarity!inner(*),mlb_player!inner(*)',
                // 'rarity.name': 'eq.All-Star',
                // 'mlb_player.offense_col': 'eq.1',
                franchise: 'eq.Baltimore Orioles',
                limit: 3
            }
        }
    )

    // const player = computed(() => data.value?.[0] ?? null)
    const players = computed(() => data.value ?? [])

    console.log('data:')
    console.log(data)
    console.log('player: ')
    console.log(players)
</script>

<template>
    <h2>Random Cards!</h2>
    <div >
        <div v-if="pending">Loading...</div>
        <div v-else-if="error">Failed to load player</div>
        <div v-else class="grid">
            <div v-for="player in players" :key="player.id">
                <Player :player="player" />
            </div>
        </div>
        <!-- <Player v-if="player" :player="player" /> -->
    </div>
</template>