<script setup lang="ts">
// <!-- ld-v2 --> Window countdown chip. Suspended (boundary objection) shows the
// pause state — the most important state to make visible.
import { BOUNDARY_SUSPENDED } from '~/lexicon'

const props = defineProps<{
  endsAt?: string
  suspendedAt?: string
}>()

const label = computed(() => {
  if (props.suspendedAt) return BOUNDARY_SUSPENDED
  if (!props.endsAt) return ''
  const ms = new Date(props.endsAt).getTime() - Date.now()
  if (ms <= 0) return 'échéance passée'
  const h = Math.floor(ms / 3_600_000)
  if (h < 1) return `${Math.max(1, Math.floor(ms / 60_000))} min restantes`
  if (h < 48) return `${h} h restantes`
  return `${Math.floor(h / 24)} jours restants`
})
</script>

<template>
  <!-- ld-v2 -->
  <span class="ld-countdown" :class="{ 'ld-countdown--paused': suspendedAt }">
    <UIcon :name="suspendedAt ? 'i-lucide-pause' : 'i-lucide-timer'" />
    <span>{{ label }}</span>
  </span>
</template>

<style scoped>
.ld-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mood-status-fenetre);
  background: var(--mood-status-fenetre-bg);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.ld-countdown--paused {
  background: repeating-linear-gradient(
    -45deg,
    var(--mood-status-fenetre-bg),
    var(--mood-status-fenetre-bg) 6px,
    transparent 6px,
    transparent 10px
  );
}
</style>
