import React from 'react';

export function LogsOverviewPage() {
  return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold text-secondary-900 mb-4">Logs Übersicht</h1>
      <p className="text-secondary-600 mb-6">
        System- und Audit-Logs einsehen, filtern und exportieren.
      </p>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="p-6 bg-white rounded-xl border border-secondary-200">
          <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-3">
            <svg className="w-6 h-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
          </div>
          <h3 className="font-semibold text-secondary-900">Audit-Log</h3>
          <p className="text-sm text-secondary-500 mt-1">Alle Änderungen nachverfolgen</p>
        </div>
        <div className="p-6 bg-white rounded-xl border border-secondary-200">
          <div className="w-12 h-12 bg-warning-100 rounded-lg flex items-center justify-center mb-3">
            <svg className="w-6 h-6 text-warning-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
          </div>
          <h3 className="font-semibold text-secondary-900">System-Logs</h3>
          <p className="text-sm text-secondary-500 mt-1">Container, Worker, Datenbank</p>
        </div>
        <div className="p-6 bg-white rounded-xl border border-secondary-200">
          <div className="w-12 h-12 bg-danger-100 rounded-lg flex items-center justify-center mb-3">
            <svg className="w-6 h-6 text-danger-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
          </div>
          <h3 className="font-semibold text-secondary-900">Fehler</h3>
          <p className="text-sm text-secondary-500 mt-1">API- und Plugin-Fehler</p>
        </div>
      </div>
    </div>
  );
}