interface Props {
  heights: number[]       // 8 valeurs de hauteur (px)
  filledCount: number     // nb de barres remplies (de gauche à droite)
}

export function CriteriaBars({ heights, filledCount }: Props) {
  return (
    <div className="criteria-bars">
      {heights.map((h, i) => (
        <div
          key={i}
          className={`crit-bar${i < filledCount ? ' filled' : ''}`}
          style={{ height: h }}
        />
      ))}
    </div>
  )
}