import { ReactNode } from 'react';

interface TableProps<T> {
  columns: { key: string; label: string; render?: (row: T) => ReactNode }[];
  data: T[];
  rowKey: (row: T) => string;
}

export function Table<T extends Record<string, any>>({ columns, data, rowKey }: TableProps<T>) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse">
        <thead>
          <tr className="border-b border-border">
            {columns.map((col) => (
              <th key={col.key} className="text-left py-3 px-4 font-medium text-text-muted text-sm">
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row) => (
            <tr key={rowKey(row)} className="border-b border-border hover:bg-background/50">
              {columns.map((col) => (
                <td key={col.key} className="py-3 px-4 text-text">
                  {col.render ? col.render(row) : String(row[col.key] ?? '')}
                </td>
              ))}
            </tr>
          ))}
          {data.length === 0 && (
            <tr>
              <td colSpan={columns.length} className="py-8 text-center text-text-muted">
                No data available
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}