<template>
  <div class="user-list">
    <h3 v-if="chatStore.isLoggedIn">
      {{ $t('logged_in_count', [chatStore.users.length]) }}
    </h3>
    
    <div v-if="chatStore.isLoggedIn">
      <div
        v-for="user in chatStore.users"
        :key="user.sessionId"
        :class="['user-item', `gender-${user.gender}`]"
        @click="selectUser(user.userName)"
      >
        <img
          v-if="user.isoCountryCode"
          :src="`/static/flags/${user.isoCountryCode}.png`"
          :alt="user.country"
          class="flag-icon"
        />
        {{ user.userName }} ({{ user.age }}, {{ user.gender }})
      </div>
    </div>
  </div>
</template>

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

const chatStore = useChatStore();

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

