'use client'

const hosts = [
  { name: 'web-01', status: 'healthy', cpu: 45, memory: 62, disk: 34 },
  { name: 'web-02', status: 'healthy', cpu: 38, memory: 58, disk: 41 },
  { name: 'api-01', status: 'warning', cpu: 78, memory: 85, disk: 52 },
  { name: 'db-01', status: 'healthy', cpu: 22, memory: 71, disk: 68 },
  { name: 'cache-01', status: 'critical', cpu: 92, memory: 94, disk: 45 },
]

export default function HostsTable() {
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'healthy':
        return 'bg-green-500'
      case 'warning':
        return 'bg-yellow-500'
      case 'critical':
        return 'bg-red-500'
      default:
        return 'bg-slate-500'
    }
  }

  const getMetricColor = (value: number) => {
    if (value >= 90) return 'text-red-400'
    if (value >= 70) return 'text-yellow-400'
    return 'text-green-400'
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="text-left text-slate-400 text-sm border-b border-slate-800">
            <th className="pb-3">Host</th>
            <th className="pb-3">Status</th>
            <th className="pb-3">CPU</th>
            <th className="pb-3">Memory</th>
            <th className="pb-3">Disk</th>
          </tr>
        </thead>
        <tbody>
          {hosts.map((host) => (
            <tr
              key={host.name}
              className="border-b border-slate-800/50 hover:bg-slate-800/30 transition cursor-pointer"
            >
              <td className="py-3">
                <div className="flex items-center space-x-2">
                  <span>🖥️</span>
                  <span className="font-medium">{host.name}</span>
                </div>
              </td>
              <td className="py-3">
                <div className="flex items-center space-x-2">
                  <span className={`w-2 h-2 rounded-full ${getStatusColor(host.status)}`}></span>
                  <span className="capitalize text-sm">{host.status}</span>
                </div>
              </td>
              <td className={`py-3 ${getMetricColor(host.cpu)}`}>
                {host.cpu}%
              </td>
              <td className={`py-3 ${getMetricColor(host.memory)}`}>
                {host.memory}%
              </td>
              <td className={`py-3 ${getMetricColor(host.disk)}`}>
                {host.disk}%
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
