interface ShieldBarProps {
  homeShield: number
  awayShield: number
}

// ShieldBar is a low-level plaintext visual decorator showing combatant health
export function ShieldBar({ homeShield, awayShield }: ShieldBarProps) {
  return (
    <div className="flex items-center gap-1 text-[8px] font-mono text-slate-600 w-full select-none">
      <span className="w-6 text-right">{homeShield}%</span>
      <div className="flex-1 h-1 bg-slate-900 overflow-hidden flex gap-px border border-slate-900">
        <div
          className="bg-amber-500/60 h-full"
          style={{ width: `${homeShield}%` }}
        />
        <div
          className="bg-rose-500/60 h-full"
          style={{ width: `${awayShield}%` }}
        />
      </div>
      <span className="w-6 text-left">{awayShield}%</span>
    </div>
  )
}
