<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: rgba(220,252,231,0.9); color: #166534; border: 1px solid #86EFAC; }
.warning  { background: rgba(254,243,199,0.9); color: #92400E; border: 1px solid #FDE68A; }
.danger   { background: rgba(254,226,226,0.9); color: #991B1B; border: 1px solid #FCA5A5; }
.info     { background: rgba(224,242,254,0.9); color: #1E40AF; border: 1px solid #93C5FD; }
</style>
