<template>
  <div class="user-list">
    <h3 v-if="chatStore.isLoggedIn">
      {{ $t('logged_in_count', [chatStore.users.length]) }}
    </h3>
    
    <div v-if="chatStore.isLoggedIn" class="user-list-scroll">
      <button
        v-for="user in chatStore.users"
        :key="user.sessionId"
        :class="[
          'user-item',
          `gender-${user.gender}`,
          { 'is-active': chatStore.currentConversation === user.userName }
        ]"
        @click="selectUser(user.userName)"
      >
        <span class="user-avatar" :data-initial="user.userName.charAt(0).toUpperCase()">
          <span class="user-status" aria-hidden="true"></span>
        </span>
        <span class="user-main">
          <span class="user-name">{{ user.userName }}</span>
          <span class="user-country">{{ user.age }} · {{ user.gender }}</span>
        </span>
        <span class="user-meta">{{ user.isoCountryCode || '' }}</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { useChatStore } from '../stores/chat';

const chatStore = useChatStore();

function selectUser(userName) {
  if (userName !== chatStore.userName) {
    chatStore.requestConversation(userName);
  }
}
</script>
