<script setup>
/**
 * Green/red online indicator for the commission system (marketplace-confirmation
 * backend). Reads the shared polled state — no own polling; the page owns the
 * polling lifecycle. `compact` renders the dot only (mobile header).
 */
defineProps({
  compact: { type: Boolean, default: false }
})

const { t } = useTranslation()
const { status } = useCommissionSystemStatus()
</script>

<template>
  <ClientOnly>
    <div
      class="commission-system-pill"
      :class="[status.online ? 'is-online' : 'is-offline', { 'is-compact': compact }]"
      :title="status.online ? t.commission_system_online : t.commission_system_offline"
    >
      <span class="pill-dot"></span>
      <span v-if="!compact" class="pill-label">
        {{ status.online ? t.commission_system_online : t.commission_system_offline }}
      </span>
    </div>
  </ClientOnly>
</template>

<style scoped>
.commission-system-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
}
.commission-system-pill.is-compact {
  padding: 0.3rem;
}
.commission-system-pill.is-online {
  background: rgba(72, 199, 142, 0.12);
  color: #257953;
}
.commission-system-pill.is-offline {
  background: rgba(241, 70, 104, 0.14);
  color: #cc0f35;
}
.pill-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.is-online .pill-dot {
  background: #48c78e;
}
.is-offline .pill-dot {
  background: #f14668;
  animation: commission-pill-pulse 1.2s ease-in-out infinite;
}
@keyframes commission-pill-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(241, 70, 104, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(241, 70, 104, 0); }
}
</style>
