// ============================================================================
// CI/CD Dashboard - Shared Helper Components & Utilities
// ============================================================================

export function ProgressBar({ percent, color = 'blue' }: { percent: number; color?: string }) {
  const getColor = () => {
    if (percent > 90) return 'bg-red-500'
    if (percent > 70) return 'bg-yellow-500'
    if (color === 'green') return 'bg-green-500'
    if (color === 'purple') return 'bg-purple-500'
    return 'bg-blue-500'
  }

  return (
    <div className="w-full bg-slate-200 rounded-full h-2">
      <div
        className={`h-2 rounded-full transition-all duration-300 ${getColor()}`}
        style={{ width: `${Math.min(percent, 100)}%` }}
      />
    </div>
  )
}

export function formatUptime(seconds: number): string {
  const days = Math.floor(seconds / 86400)
  const hours = Math.floor((seconds % 86400) / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  if (days > 0) return `${days}d ${hours}h ${minutes}m`
  if (hours > 0) return `${hours}h ${minutes}m`
  return `${minutes}m`
}

export function getStateColor(state: string): string {
  switch (state) {
    case 'running': return 'bg-green-100 text-green-800'
    case 'exited':
    case 'dead': return 'bg-red-100 text-red-800'
    case 'paused': return 'bg-yellow-100 text-yellow-800'
    case 'restarting': return 'bg-blue-100 text-blue-800'
    default: return 'bg-slate-100 text-slate-600'
  }
}