'use client'

import type { AuditLogEntry } from '@/lib/sdk/training/types'

interface AuditTabProps {
  auditLog: AuditLogEntry[]
}

export function AuditTab({ auditLog }: AuditTabProps) {
  return (
    <div className="space-y-4">
      <div className="overflow-x-auto">
        <table className="w-full text-sm border-collapse">
          <thead>
            <tr className="bg-gray-50">
              <th className="text-left p-2 border font-medium text-gray-700">Zeitpunkt</th>
              <th className="text-left p-2 border font-medium text-gray-700">Aktion</th>
              <th className="text-left p-2 border font-medium text-gray-700">Entitaet</th>
              <th className="text-left p-2 border font-medium text-gray-700">Details</th>
            </tr>
          </thead>
          <tbody>
            {auditLog.map(entry => (
              <tr key={entry.id} className="border-b hover:bg-gray-50">
                <td className="p-2 border text-xs text-gray-600">{new Date(entry.created_at).toLocaleString('de-DE')}</td>
                <td className="p-2 border"><span className="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-700">{entry.action}</span></td>
                <td className="p-2 border text-xs">{entry.entity_type}</td>
                <td className="p-2 border text-xs text-gray-600">{JSON.stringify(entry.details).substring(0, 100)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {auditLog.length === 0 && <p className="text-center text-gray-500 py-8">Keine Audit-Eintraege</p>}
    </div>
  )
}