pos/client/src/components/Table.tsx

import React from "react";

interface Column<T> {
  key: string;
  header: string;
  render?: (row: T) => React.ReactNode;
}

interface TableProps<T> {
  columns: Column<T>[];
  data: T[];
  keyField: keyof T;
  loading?: boolean;
  emptyText?: string;
}

export function Table<T>({ columns, data, keyField, loading, emptyText = "No records found." }: TableProps<T>) {
  return (
    <div style={s.wrapper}>
      <table style={s.table}>
        <thead>
          <tr>
            {columns.map((col) => (
              <th key={col.key} style={s.th}>
                {col.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {loading ? (
            <tr>
              <td colSpan={columns.length} style={s.empty}>
                Loading…
              </td>
            </tr>
          ) : data.length === 0 ? (
            <tr>
              <td colSpan={columns.length} style={s.empty}>
                {emptyText}
              </td>
            </tr>
          ) : (
            data.map((row) => (
              <tr key={String(row[keyField])} style={s.tr}>
                {columns.map((col) => (
                  <td key={col.key} style={s.td}>
                    {col.render ? col.render(row) : String((row as Record<string, unknown>)[col.key] ?? "")}
                  </td>
                ))}
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}

const s: Record<string, React.CSSProperties> = {
  wrapper: {
    overflowX: "auto",
    border: "1px solid var(--color-border)",
    borderRadius: "var(--radius)",
    background: "var(--color-surface)",
  },
  table: { width: "100%", borderCollapse: "collapse", fontSize: 14 },
  th: {
    textAlign: "left",
    padding: "10px 16px",
    background: "#f8fafc",
    borderBottom: "1px solid var(--color-border)",
    fontWeight: 600,
    color: "var(--color-text-muted)",
    fontSize: 12,
    textTransform: "uppercase",
    letterSpacing: "0.04em",
    whiteSpace: "nowrap",
  },
  tr: { borderBottom: "1px solid var(--color-border)" },
  td: { padding: "10px 16px", verticalAlign: "middle" },
  empty: { padding: "32px 16px", textAlign: "center", color: "var(--color-text-muted)" },
};