'use client';

/**
 * Enhanced Table Component
 *
 * Features:
 * - Larger font: text-base for cells (more readable)
 * - Better padding: py-4 px-6 (spacious)
 * - Full-width with proper column distribution
 * - Hover states for rows
 * - Responsive: horizontal scroll on mobile
 * - Optional sortable headers (UI only, no logic yet)
 *
 * Usage:
 * <Table
 *   headers={['Name', 'Type', 'Required', 'Description']}
 *   rows={[
 *     ['prompt', 'string', 'Yes', 'The text prompt'],
 *     ['filename', 'string', 'No', 'Output filename'],
 *   ]}
 * />
 */

interface TableProps {
  headers: string[];
  rows: (string | React.ReactNode)[][];
  sortable?: boolean;
}

export const Table = ({ headers, rows, sortable = false }: TableProps) => {
  return (
    <div className="overflow-x-auto rounded-xl border border-slate-700 bg-slate-900/50 backdrop-blur-sm">
      <table className="w-full">
        {/* Header */}
        <thead>
          <tr className="border-b border-slate-700 bg-slate-800/50">
            {headers.map((header, idx) => (
              <th
                key={idx}
                className="py-4 px-6 text-left text-sm font-semibold text-white whitespace-nowrap"
              >
                <div className="flex items-center gap-2">
                  {header}
                  {sortable && (
                    <button
                      className="text-gray-500 hover:text-gray-300 transition-colors"
                      aria-label={`Sort by ${header}`}
                    >
                      <svg
                        className="w-4 h-4"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
                        />
                      </svg>
                    </button>
                  )}
                </div>
              </th>
            ))}
          </tr>
        </thead>

        {/* Body */}
        <tbody>
          {rows.map((row, rowIdx) => (
            <tr
              key={rowIdx}
              className="border-b border-slate-800 last:border-b-0 hover:bg-slate-800/30 transition-colors"
            >
              {row.map((cell, cellIdx) => (
                <td
                  key={cellIdx}
                  className="py-4 px-6 text-base text-gray-300 align-top"
                >
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
