<template>
    <button class="relative" @click="$emit('selectUser', user)">
        <Avatar class="w-24" :user="user" />
        <div class="absolute w-fit mx-auto bottom-0 inset-x-0">
            <kbd class="kbd kbd-sm">{{ rank }}</kbd>
        </div>
    </button>
</template>

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

    const props = defineProps<{
        user: User,
        rank: Number,
    }>();
</script>
