import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
} from '@/components/ui/table';
import type { TableBlockData } from '../../../../../shared/api-types';

export function ChatTableBlock({ data }: { data: TableBlockData }) {
  const { headers, rows } = data;

  if (!headers.length && !rows.length) return null;

  return (
    <div className="rounded-lg border border-border bg-card overflow-hidden">
      <Table>
        {headers.length > 0 && (
          <TableHeader>
            <TableRow>
              {headers.map((h, i) => (
                <TableHead key={i}>{h}</TableHead>
              ))}
            </TableRow>
          </TableHeader>
        )}
        <TableBody>
          {rows.map((row, ri) => (
            <TableRow key={ri}>
              {row.map((cell, ci) => (
                <TableCell key={ci}>{cell}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
