import React from 'react'

// Shared fate-point control: shows current/total and three spend actions that
// modify the roller's most recent roll. `disabled` is true when there is no
// roll to modify; the buttons additionally require a remaining fate point.
export default function FateControls({ fate, disabled, onReroll, onPlus10, onAddDos }) {
  const current = fate ? fate.current : 0
  const noFate = !fate || current <= 0
  const btn = 'rounded-xl px-3 py-1.5 text-sm bg-purple-800 hover:bg-purple-700 disabled:opacity-40'
  return (
    <div className="flex flex-wrap items-center gap-2 text-sm">
      <span className="text-purple-300">✧ Fate {fate ? `${current}/${fate.total}` : '—'}</span>
      <button className={btn} disabled={disabled || noFate} onClick={onReroll} title="Spend a fate point to re-roll">Re-roll</button>
      <button className={btn} disabled={disabled || noFate} onClick={onPlus10} title="Spend a fate point for +10">+10</button>
      <button className={btn} disabled={disabled || noFate} onClick={onAddDos} title="Spend a fate point for +1 degree of success">+DoS</button>
    </div>
  )
}
