export function ArenaBar({
  className = '',
  current,
  label,
  max,
  shield = 0,
}: {
  className?: string
  current: number
  label?: string
  max: number
  shield?: number
}) {
  const percent = max > 0 ? Math.max(0, Math.min(100, (current / max) * 100)) : 0
  const shieldPercent = max > 0 ? Math.max(0, Math.min(100, (shield / max) * 100)) : 0
  return (
    <div className={`iwt2-bar ${className}`}>
      <span style={{ width: `${percent}%` }} />
      {shieldPercent > 0 && <i style={{ width: `${shieldPercent}%` }} />}
      {label && <em>{label}</em>}
    </div>
  )
}