---
// Indicatore sintetico: valore grande, etichetta e variazione con verso.
interface Props { label: string; value: string | number; delta?: string; trend?: 'up' | 'down' }
const { label, value, delta, trend = 'up' } = Astro.props;
---
<div class="si-card">
  <p class="si-kpi__label">{label}</p>
  <p class="si-kpi__value">{value}</p>
  {delta && (
    <p class:list={['si-kpi__delta', trend === 'down' ? 'si-kpi__delta--down' : 'si-kpi__delta--up']}>
      {trend === 'down' ? '▼' : '▲'} {delta}
    </p>
  )}
</div>