'use client'

import type { ProcessItem } from './ProcessRow'
import ProcessRow from './ProcessRow'

interface ProcessTableProps {
  processes: ProcessItem[]
  noDevice?: boolean
}

export default function ProcessTable({ processes, noDevice }: ProcessTableProps) {
  if (noDevice) {
    return (
      <div className="rounded-xl border border-white/10 bg-dark-300/50 overflow-hidden">
        <div className="px-4 py-3 border-b border-white/10">
          <h3 className="text-sm font-medium text-gray-400">
            Procesos Activos (Top 10 por CPU)
          </h3>
        </div>
        <div className="flex flex-col items-center justify-center py-16 text-gray-500">
          Selecciona un dispositivo
        </div>
      </div>
    )
  }

  return (
    <div className="rounded-xl border border-white/10 bg-dark-300/50 overflow-hidden">
      <div className="px-4 py-3 border-b border-white/10">
        <h3 className="text-sm font-medium text-gray-400">
          Procesos Activos (Top 10 por CPU)
        </h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full border-collapse">
          <thead>
            <tr className="border-b border-white/10 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
              <th className="py-3 px-4">Proceso</th>
              <th className="py-3 px-4 w-20">PID</th>
              <th className="py-3 px-4 w-24">CPU %</th>
              <th className="py-3 px-4 w-24">Memoria</th>
              <th className="py-3 px-4 w-24">Estado</th>
            </tr>
          </thead>
          <tbody>
            {processes.length === 0 ? (
              <tr>
                <td
                  colSpan={5}
                  className="py-8 text-center text-sm text-gray-500"
                >
                  Sin datos
                </td>
              </tr>
            ) : (
              processes.map((p) => (
                <ProcessRow key={p.id} process={p} />
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}