interface TickProgressProps {
  current: number
  max: number
}

export function TickProgress({ current, max }: TickProgressProps) {
  const percent = Math.min(Math.max((current / max) * 100, 0), 100)
  const barLength = 20
  const filledLength = Math.round((percent / 100) * barLength)
  const emptyLength = barLength - filledLength

  const filledBar = '█'.repeat(filledLength)
  const emptyBar = '░'.repeat(emptyLength)

  return (
    <div className="font-mono text-xs select-none flex items-center gap-2">
      <span className="text-slate-500">CYCLE:</span>
      <span className="text-slate-300 font-bold">
        {current}/{max}
      </span>
      <span className="text-slate-600 tracking-tighter">
        [{filledBar}
        {emptyBar}]
      </span>
      <span className="text-slate-400">{percent.toFixed(0)}%</span>
    </div>
  )
}
