/**
 * Reusable table component for the audit documentation.
 * Renders a striped HTML table with headers and rows.
 */

export function Table({ headers, rows }: { headers: string[]; rows: string[][] }) {
  return (
    <div className="overflow-x-auto my-4">
      <table className="min-w-full border-collapse border border-slate-300">
        <thead>
          <tr className="bg-slate-100">
            {headers.map((header, i) => (
              <th key={i} className="border border-slate-300 px-4 py-2 text-left text-sm font-semibold text-slate-700">
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
              {row.map((cell, j) => (
                <td key={j} className="border border-slate-300 px-4 py-2 text-sm text-slate-600">
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}