import React from 'react';
import { formatCellValue, typeBadgeClass, typeLabel } from '../lib/format';
import type { ColumnInfo } from '../api/types';

interface Props {
  rows: Record<string, any>[];
  columns: string[];
  schema: ColumnInfo[];
  maxRows?: number;
}

export function TablePreview({ rows, columns, schema, maxRows = 10 }: Props) {
  return (
    <div className="overflow-x-auto max-h-64 overflow-y-auto rounded-lg border border-gray-200">
      <table className="data-table w-full">
        <thead>
          <tr>
            {columns.map((name) => {
              const col = schema.find((c) => c.name === name);
              return (
                <th key={name}>
                  <div className="flex items-center gap-1">
                    <span className={`badge ${typeBadgeClass(col?.column_type || 'unknown')} text-[9px]`}>
                      {typeLabel(col?.column_type || 'unknown')}
                    </span>
                    {name}
                  </div>
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {rows.slice(0, maxRows).map((row, i) => (
            <tr key={i}>
              {columns.map((name) => (
                <td key={name}>{formatCellValue(row[name])}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}