clube67_newwhats.local/clube67/newwhats.local/frontend/components/ui/Table.tsx

import React from 'react';

interface Column {
  key: string;
  label: string;
  align?: 'left' | 'center' | 'right';
}

interface TableProps<T> {
  columns: Column[];
  data: T[];
  renderRow: (item: T, index: number) => React.ReactNode;
  emptyMessage?: string;
  emptyIcon?: React.ReactNode;
}

export default function Table<T>({ columns, data, renderRow, emptyMessage = 'Nenhum registro encontrado', emptyIcon }: TableProps<T>) {
  return (
    <div className="bg-white/[0.02] border border-white/5 rounded-3xl overflow-hidden backdrop-blur-xl">
      <div className="overflow-x-auto">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="border-b border-white/5 bg-black/20">
              {columns.map(col => (
                <th
                  key={col.key}
                  className={`py-4 px-6 text-xs font-bold text-slate-500 tracking-wider uppercase ${
                    col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : ''
                  }`}
                >
                  {col.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-white/5">
            {data.length > 0 ? (
              data.map((item, i) => renderRow(item, i))
            ) : (
              <tr>
                <td colSpan={columns.length} className="py-16 text-center">
                  {emptyIcon && <div className="flex justify-center mb-4 text-white/5">{emptyIcon}</div>}
                  <p className="text-slate-600 text-sm">{emptyMessage}</p>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}