---
interface Props {
  size?: number;
  duration?: number;
  suffix?: string;
  label: string;
  sublabel?: string;
  light?: boolean;
}

const { size = 96, duration = 2000, suffix = '', label, sublabel, light = false } = Astro.props;
const numId = `stat-${Math.random().toString(36).slice(2, 9)}`;
---
<div class="text-center group">
  <div class={`stat-number font-display leading-none ${light ? 'text-white' : ''}`} style={`font-size: ${size}px; color: var(--color-hds-naranja); font-weight: 500;`} data-target={typeof label === 'string' && /^\d+$/.test(label) ? label : '0'} data-suffix={suffix} data-duration={duration} id={numId}>
    {label}{suffix}
  </div>
  <div class={`text-sm font-semibold mt-3 ${light ? 'text-hds-crema-soft' : ''}`} style={light ? 'color: #FAF6EE' : 'color: var(--hds-fg-soft)'}>
    <slot name="label">{label}</slot>
  </div>
  {sublabel && (
    <div class={`text-xs mt-1 ${light ? 'text-hds-line' : ''}`} style={light ? 'color: #C8C2B8' : 'color: var(--hds-fg-muted)'}>
      {sublabel}
    </div>
  )}
</div>
