'use client'

import React from 'react'

export function AuditLog({ history }: { history: any[] }) {
  return (
    <div className="space-y-3">
      <h4 className="text-sm font-medium text-gray-700">Aktivitaeten</h4>
      <div className="space-y-2">
        {history.length === 0 && (
          <div className="text-xs text-gray-400">Keine Eintraege</div>
        )}
        {history.map((entry, idx) => (
          <div key={entry.id || idx} className="flex items-start gap-2 text-xs">
            <div className="w-1.5 h-1.5 rounded-full bg-gray-300 mt-1.5 flex-shrink-0" />
            <div>
              <div className="text-gray-900">
                {entry.previous_status
                  ? `${entry.previous_status} → ${entry.new_status}`
                  : entry.new_status
                }
                {entry.comment && `: ${entry.comment}`}
              </div>
              <div className="text-gray-500">
                {entry.created_at
                  ? new Date(entry.created_at).toLocaleDateString('de-DE', {
                      day: '2-digit',
                      month: '2-digit',
                      year: 'numeric',
                      hour: '2-digit',
                      minute: '2-digit'
                    })
                  : ''
                }
                {' - '}
                {entry.changed_by || 'System'}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}