<template>
  <el-select
    :model-value="modelValue"
    :disabled="disabled"
    filterable
    :placeholder="t('clientSelect.placeholder')"
    class="w-full"
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <el-option
      v-for="c in clients"
      :key="c.id"
      :label="clientLabel(c)"
      :value="c.id"
    />
  </el-select>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

defineProps({
  modelValue: { type: Number, default: null },
  clients: { type: Array, default: () => [] },
  disabled: { type: Boolean, default: false },
})

defineEmits(['update:modelValue'])

function clientLabel(c) {
  const status = c.online ? t('common.online') : t('common.offline')
  return t('clientSelect.label', { name: c.name, id: c.id, status })
}
</script>
