<template>
  <div class="bg-indigo-200 shadow-classic rounded-md p-5">
    <span class="block text-white font-medium">Лидеры</span>
    <div v-if="leaderUsers.length" class="mt-5 space-y-5">
      <div v-for="leaderUser in leaderUsers" :key="leaderUser.id"
           class="flex items-center"
      >
        <div class="flex-shrink-0 mr-2 md:mr-4">
          <inertia-link :href="route('profile.user', leaderUser.username)" class="flex-shrink-0 block mr-2 md:mr-4">
            <user-avatar :user="leaderUser" size="small"
                         class="w-10 h-10 md:w-14 md:h-14 text-lg"
            />
          </inertia-link>
        </div>
        <div class="flex flex-col">
          <inertia-link :href="route('profile.user', leaderUser.username)" class="hover:underline text-sm md:text-base block text-white">
            {{ leaderUser.name }}
          </inertia-link>
          <span class="text-xs text-gray-light">Кол. голосов: {{ leaderUser.countVote }}</span>
        </div>
      </div>
    </div>
    <div v-else class="text-center mt-3 text-lg text-gray-light">
      Лидер не определен
    </div>
  </div>
</template>

<script>
import { usePage } from '@inertiajs/inertia-vue3'
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'


export default {
    components: {
        UserAvatar,
    },

    computed: {
        leaderUsers() {
            return usePage().props.value.leaders
        },
    }
}
</script>
