<template>
 <q-item-section avatar>
    <pn-auto-avatar
      :img="item.photo"
      :name="item.section1"
    />
  </q-item-section>
  <q-item-section>
    <slot/>
    <q-item-label lines="1" v-if="showStatus && getUserStatus(item) && getUserStatus(item)?.status">
      <q-badge  :color="getUserStatus(item)?.color">
        {{ $t(getUserStatus(item)?.text ?? '') }}
      </q-badge>
    </q-item-label>
    <q-item-label lines="1" class="text-bold" v-if="item.section1">
      {{item.section1}}
    </q-item-label>
    <q-item-label lines="2" caption v-if="item.section3">
      {{item.section3}}
    </q-item-label>
    <q-item-label caption v-if="item.section2_1 || item.section2_2">
      <pn-inline-pair
        :item1="item.section2_1 ? item.section2_1 :null"
        item1Class="text-bold"
        item1Icon="telegram"
        item1IconColor="tgcolor"
        :item2="item.section2_2 ? '@' + item.section2_2 : null"
        item2Class="text-blue"
      />
    </q-item-label>
  </q-item-section>
</template>

<script setup lang="ts">
  import { getUserStatus } from 'utils/users'
  import pnInlinePair from 'components/pnInlinePair.vue'
  import type { User } from 'types/User'

  type UserListItem = User & {
    section1: string
    section2_1: string
    section2_2: string
    section3: string
    is_blocked: boolean
    is_leave: boolean
    companyName?: string | null
  }

  defineProps<{
    item: UserListItem
    showStatus?: boolean
  }>()

</script>

<style scoped>
</style>
