---
// La carta di un macro-score (Performance/Energy/Recovery). Stesso principio del radar:
// il numero se il dato basta, un trattino se no — MAI uno zero, che si leggerebbe come
// "hai zero" invece di "non lo sappiamo ancora". Il bordo tratteggiato (.lg-card--incompleto,
// dal Task 1) è lo stesso linguaggio visivo del radar: non una convenzione nuova per le carte.
// L'etichetta si deriva dal nome del contenitore (dato, letto da vista.ts), non da un
// elenco scritto qui: PERFORMANCE/ENERGY/RECOVERY diventano Performance/Energy/Recovery
// con una trasformazione, non con un dizionario da tenere allineato a mano.
import { formattaNumero } from '../../lib/longevity/formato';

interface Props {
  nome: string;
  valore: number | null;
  copertura: number;
}
const { nome, valore, copertura } = Astro.props;
const etichetta = nome.charAt(0) + nome.slice(1).toLowerCase();
// L'intensità dell'accento (mai un colore diverso, Task 1): minimo 0.15 così una carta
// nota ma bassa resta comunque leggibile, non sparisce nello sfondo.
const intensita = valore !== null ? Math.max(valore / 100, 0.15) : 0;
---
<div class:list={['lg-card', 'lg-macro__card', { 'lg-card--incompleto': valore === null }]}>
  <p class="lg-score__label">{etichetta}</p>
  <div class="lg-score">
    <span class="lg-score__value lg-num">{valore !== null ? formattaNumero(valore) : '—'}</span>
    <span class="lg-score__max">/ 100</span>
  </div>
  <div class="lg-score__bar">
    <span
      class="lg-score__bar-fill"
      style={`width:${valore !== null ? valore : 0}%; --lg-intensita:${intensita}`}
    ></span>
  </div>
  <p class="lg-muted lg-macro__nota">
    Copertura dati: {Math.round(copertura * 100)}%{valore === null && ' — non ancora sufficiente per un numero.'}
  </p>
</div>