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

    // const config = useRuntimeConfig()
    const user = useSupabaseUser()
    const client = useSupabaseClient()

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

    const { data: playerList, pending, error } = await useAsyncData<Player[] | null>(
        'random_player', 
        async () => {
            const { data } = await client.from('random_player')
            .select('*,rarity!inner(*),mlb_player!inner(*)')
            .eq('franchise', 'Baltimore Orioles')
            .eq('mlb_player.offense_col', 1)
            .limit(3)

            console.log('players from supabase: ', data)
            return data
        },
        {
            lazy: true,
            server: false
        }
    )
    
</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-if="playerList?.length == 0">No players found</div>
        <div v-else class="grid">
            <div v-for="player in playerList" :key="player.id">
                <Player :player="player" />
            </div>
        </div>
        <!-- <Player v-if="player" :player="player" /> -->
    </div>
</template>