import type { ModelBreakdown } from '../lib/api';

interface Props {
  data: ModelBreakdown[];
}

export default function ModelTable({ data }: Props) {
  if (data.length === 0) {
    return <p className="text-dd0c-muted text-sm py-4 text-center">No model usage data yet.</p>;
  }

  return (
    <table className="w-full text-sm" role="table">
      <thead>
        <tr className="text-dd0c-muted text-xs uppercase tracking-wide border-b border-dd0c-border">
          <th className="text-left py-2 px-3">Model</th>
          <th className="text-right py-2 px-3">Requests</th>
          <th className="text-right py-2 px-3">Tokens</th>
          <th className="text-right py-2 px-3">Cost</th>
        </tr>
      </thead>
      <tbody>
        {data.map((m) => (
          <tr key={m.model} className="border-b border-dd0c-border/50 hover:bg-dd0c-border/20">
            <td className="py-2 px-3 font-mono text-dd0c-accent">{m.model}</td>
            <td className="py-2 px-3 text-right">{m.request_count.toLocaleString()}</td>
            <td className="py-2 px-3 text-right">{m.total_tokens.toLocaleString()}</td>
            <td className="py-2 px-3 text-right text-dd0c-warning">${m.total_cost.toFixed(4)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
