<script setup lang="ts">
import { useAdminLocale } from '../composables/useAdminLocale';

withDefaults(
  defineProps<{
    status: string;
    isOnline?: boolean;
  }>(),
  { isOnline: false },
);

const { t } = useAdminLocale();

function statusTagType(s: string) {
  return s === 'ACTIVE' ? 'success' : s === 'SUSPENDED' ? 'warning' : 'info';
}

function statusLabel(s: string) {
  const key = `user.status.${s}`;
  const label = t(key);
  return label !== key ? label : s;
}
</script>

<template>
  <span class="player-status-with-presence">
    <el-tag :type="statusTagType(status)" size="small">{{ statusLabel(status) }}</el-tag>
    <span :class="isOnline ? 'presence-online' : 'presence-offline'">
      ({{ t(isOnline ? 'user.presence_online' : 'user.presence_offline') }})
    </span>
  </span>
</template>

<style scoped>
.player-status-with-presence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.presence-online {
  font-size: 12px;
  color: #2d8a4e;
  font-weight: 600;
}

.presence-offline {
  font-size: 12px;
  color: #999;
}
</style>
