<script setup lang="ts">
defineProps<{
  rank: number | null;
}>();
</script>

<template>
  <div v-if="rank !== null" class="flex justify-center">
    <span v-if="rank === 1" class="badge badge-warning badge-lg">
      🏆 #{{ rank }}
    </span>
    <span v-else-if="rank === 2" class="badge badge-lg">
      🥈 #{{ rank }}
    </span>
    <span v-else-if="rank === 3" class="badge badge-lg">
      🥉 #{{ rank }}
    </span>
    <span v-else class="badge badge-lg">
      #{{ rank }}
    </span>
  </div>
  <div v-else class="text-2xl text-base-content/50">
    No rank yet
  </div>
</template>
