frontend/src/components/common/DataTable.tsx

import type { DataTableProps } from '../../types';

export default function DataTable({ headers, rows, caption, highlightRow }: DataTableProps) {
  return (
    <div className="overflow-x-auto">
      {caption && <p className="text-sm text-gray-500 mb-2">{caption}</p>}
      <table className="w-full text-sm">
        <thead>
          <tr className="bg-primary-700 text-white">
            {headers.map((h, i) => (
              <th key={i} className="px-4 py-3 text-left font-semibold first:rounded-tl-lg last:rounded-tr-lg">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr
              key={i}
              className={`border-b border-gray-100 ${
                highlightRow === i ? 'bg-accent-500/10 font-medium' : i % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'
              }`}
            >
              {row.map((cell, j) => (
                <td key={j} className="px-4 py-3 text-gray-700">
                  {typeof cell === 'number' ? (
                    <span className="font-mono">{cell}</span>
                  ) : (
                    cell
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}