<script setup lang="ts">
// <!-- ld-v2 --> Barres horizontales sobres de l'Observatoire — une mesure,
// une teinte (l'accent du mood, jamais codée en dur) ; l'identité est portée
// par le libellé, la grandeur par la longueur. Extrémité arrondie côté donnée,
// base carrée sur la ligne de base (specs dataviz).
export interface BarItem {
  label: string
  value: number
  display?: string
}

const props = defineProps<{ items: BarItem[] }>()

const max = computed(() => Math.max(1, ...props.items.map(i => i.value)))

function width(value: number): string {
  if (value <= 0) return '0'
  return `${Math.max(2, (value / max.value) * 100)}%`
}
</script>

<template>
  <!-- ld-v2 -->
  <div class="obars" role="img">
    <div v-for="item in items" :key="item.label" class="obars__row">
      <span class="obars__label">{{ item.label }}</span>
      <span class="obars__plot">
        <span class="obars__fill" :style="{ width: width(item.value) }" />
      </span>
      <span class="obars__value">{{ item.display ?? item.value }}</span>
    </div>
  </div>
</template>

<style scoped>
.obars { display: flex; flex-direction: column; gap: 0.5rem; }
.obars__row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 8rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.obars__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obars__plot {
  position: relative;
  height: 14px;
  /* ligne de base : filet discret, une teinte du mood */
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--mood-text-muted) 35%, transparent);
}
.obars__fill {
  position: absolute;
  inset: 1px auto 1px 0;
  background: var(--mood-accent);
  border-radius: 0 4px 4px 0; /* extrémité donnée arrondie, base carrée */
}
.obars__value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mood-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
</style>
