Table

'use client';
import { useState } from 'react';
import { ArrowUp, ArrowDown } from 'lucide-react';
import { T, TYPE, SP } from '@/lib/tokens';

interface Column<T> {
  key: keyof T;
  label: string;
  sortable?: boolean;
  render?: (row: T) => React.ReactNode;
  align?: 'left' | 'right';
}

export function Table<T>({ columns, rows }: { columns: Column<T>[]; rows: T[] }) {
  const [sort, setSort] = useState<{ key: keyof T; dir: 'asc' | 'desc' } | null>(null);
  const sorted = sort
    ? [...rows].sort((a, b) => {
        const va = a[sort.key], vb = b[sort.key];
        return sort.dir === 'asc' ? (va > vb ? 1 : -1) : (va < vb ? 1 : -1);
      })
    : rows;

  return (
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <thead>
        <tr style={{ background: T.surface2 }}>
          {columns.map((col) => (
            <th key={String(col.key)}
              onClick={() => col.sortable && setSort({ key: col.key, dir: sort?.dir === 'asc' ? 'desc' : 'asc' })}>
              {col.label}
              {sort?.key === col.key && (sort.dir === 'asc' ? <ArrowUp size={10} /> : <ArrowDown size={10} />)}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>{sorted.map((r, i) => <tr key={i}>...</tr>)}</tbody>
    </table>
  );
}