<script setup lang="ts">
defineProps<{
  status: 'pending' | 'active' | 'done' | 'cancelled' | 'approved' | 'rejected' | string
}>()

const statusMap: Record<string, { label: string; cls: string }> = {
  pending: { label: 'Ожидание', cls: 'warning' },
  active: { label: 'Активно', cls: 'success' },
  done: { label: 'Завершено', cls: 'info' },
  cancelled: { label: 'Отменено', cls: 'danger' },
  approved: { label: 'Одобрено', cls: 'success' },
  rejected: { label: 'Отклонено', cls: 'danger' },
  open: { label: 'Открыта', cls: 'success' },
  closed: { label: 'Закрыта', cls: 'danger' },
  full: { label: 'Нет мест', cls: 'warning' },
  upcoming: { label: 'Будущая', cls: 'info' },
  ongoing: { label: 'Идет', cls: 'success' },
  completed: { label: 'Завершена', cls: 'info' },
  registered: { label: 'Записан', cls: 'success' },
  attended: { label: 'Посещено', cls: 'info' },
  needsReview: { label: 'Нужен отзыв', cls: 'warning' },
}
</script>

<template>
  <span class="status-badge" :class="statusMap[status]?.cls ?? 'info'">
    {{ statusMap[status]?.label ?? status }}
  </span>
</template>

<style scoped>
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.success {
  background: var(--color-success-bg-a90);
  color: var(--color-success-text);
  border: 1px solid var(--color-primary-light);
}
.warning {
  background: var(--color-warning-bg-a90);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
}
.danger {
  background: var(--color-danger-bg-a90);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-light);
}
.info {
  background: var(--color-info-bg-a90);
  color: var(--color-info-text);
  border: 1px solid var(--color-info-border);
}
</style>
