import React from 'react'

interface StatusItem {
  label: string
  status: 'online' | 'degraded' | 'offline'
  statusText: string
}

interface SystemStatusBarProps {
  items?: StatusItem[]
}

const getStatusColor = (status: StatusItem['status']) => {
  switch (status) {
    case 'online':
      return 'bg-green-500'
    case 'degraded':
      return 'bg-yellow-500'
    case 'offline':
      return 'bg-red-500'
  }
}

const getStatusTextColor = (status: StatusItem['status']) => {
  switch (status) {
    case 'online':
      return 'text-warm-state-success'
    case 'degraded':
      return 'text-yellow-600'
    case 'offline':
      return 'text-red-600'
  }
}

const defaultItems: StatusItem[] = [
  { label: 'Backend API', status: 'online', statusText: 'Online' },
  { label: 'Database', status: 'online', statusText: 'Connected' },
  { label: 'GPU', status: 'online', statusText: 'Available' },
]

export const SystemStatusBar: React.FC<SystemStatusBarProps> = ({
  items = defaultItems,
}) => {
  return (
    <div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
      <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-4">
        System Status
      </h2>
      <div className="space-y-3">
        {items.map((item) => (
          <div key={item.label} className="flex items-center justify-between">
            <span className="text-sm text-warm-text-secondary">{item.label}</span>
            <span className={`flex items-center text-sm ${getStatusTextColor(item.status)}`}>
              <span className={`w-2 h-2 ${getStatusColor(item.status)} rounded-full mr-2`} />
              {item.statusText}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}
