'use client'

import { ConsentRecord } from '../_types'
import { ConsentRecordRow } from './ConsentRecordRow'

interface RecordsTableProps {
  records: ConsentRecord[]
  onShowDetails: (record: ConsentRecord) => void
}

export function RecordsTable({ records, onShowDetails }: RecordsTableProps) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nutzer</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Erteilt am</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Widerrufen am</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Version</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Historie</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aktion</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {records.map(record => (
              <ConsentRecordRow
                key={record.id}
                record={record}
                onShowDetails={onShowDetails}
              />
            ))}
          </tbody>
        </table>
      </div>

      {records.length === 0 && (
        <div className="p-12 text-center">
          <h3 className="text-lg font-semibold text-gray-900">Keine Einträge gefunden</h3>
          <p className="mt-2 text-gray-500">Passen Sie die Suche oder den Filter an.</p>
        </div>
      )}
    </div>
  )
}
