interface Props {
  value: number       // 0-100
  label: string       // ex: "91/100" ou "Tier 1"
  highlight?: boolean // true → barre verte (top 3 FO)
  trackWidth?: number // largeur de la barre en px
}

export function PctBar({ value, label, highlight = false, trackWidth = 50 }: Props) {
  return (
    <div className="pct-bar">
      <div className="pct-track" style={{ width: trackWidth }}>
        <div
          className="pct-fill"
          style={{
            width: `${value}%`,
            ...(highlight ? { background: 'var(--green)' } : {}),
          }}
        />
      </div>
      <span
        className="pct-val"
        style={highlight ? { color: 'var(--green)', fontWeight: 500 } : undefined}
      >
        {label}
      </span>
    </div>
  )
}