import type { Iwt2HealerAbility } from '../content/healerAbilities'

export function AbilityBar({
  abilities,
  cooldowns,
  mana,
  onCast,
}: {
  abilities: Iwt2HealerAbility[]
  cooldowns: Record<string, number>
  mana: number
  onCast: (ability: Iwt2HealerAbility) => void
}) {
  return (
    <div className="iwt2-ability-bar">
      {abilities.map((ability) => {
        const remaining = cooldowns[ability.id] ?? 0
        const disabled = remaining > 0 || mana < ability.manaCost
        return (
          <button
            aria-label={`${ability.slot}. ${ability.name}`}
            className="iwt2-ability-button"
            disabled={disabled}
            key={ability.id}
            onClick={() => onCast(ability)}
            title={`${ability.name} - ${ability.manaCost} MP`}
            type="button"
          >
            <span>{ability.icon}</span>
            <strong>{ability.slot}</strong>
            <i>{remaining > 0 ? `${remaining.toFixed(1)}s` : `${ability.manaCost} MP`}</i>
          </button>
        )
      })}
    </div>
  )
}