// components/models.jsx — ModelsTable component.
// Depends on: React (global)

function ModelsTable({ models }) {
  if (!models || !models.length) return <p className="text-gray-500 text-sm">No models available</p>;
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-xs">
        <thead>
          <tr className="border-b border-gray-200 text-left text-gray-500">
            <th className="pb-2 font-medium">Model</th>
            <th className="pb-2 font-medium">Provider</th>
            <th className="pb-2 font-medium text-right">Input $/1M</th>
            <th className="pb-2 font-medium text-right">Output $/1M</th>
            <th className="pb-2 font-medium">Tier Range</th>
            <th className="pb-2 font-medium">Capabilities</th>
          </tr>
        </thead>
        <tbody>
          {models.map(m => (
            <tr key={m.id} className="border-b border-gray-100 hover:bg-gray-50">
              <td className="py-2 font-mono text-gray-900">{m.id}</td>
              <td className="py-2"><span className="px-1.5 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{m.owned_by}</span></td>
              <td className="py-2 text-right font-mono">{!m.input_cost_per_1m ? <span className="text-emerald-600">FREE</span> : `$${m.input_cost_per_1m.toFixed(2)}`}</td>
              <td className="py-2 text-right font-mono">{!m.output_cost_per_1m ? <span className="text-emerald-600">FREE</span> : `$${m.output_cost_per_1m.toFixed(2)}`}</td>
              <td className="py-2 text-gray-600">{m.tier_range}</td>
              <td className="py-2">
                <div className="flex flex-wrap gap-1">
                  {m.capabilities?.map(c => (
                    <span key={c} className="px-1 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{c}</span>
                  ))}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
