'use client'

import type { DiagnosticEntry } from './types'

export function DiagnosticPanel({
  diagnostics,
  isLoading,
  onRun,
}: {
  diagnostics: DiagnosticEntry[]
  isLoading: boolean
  onRun: () => void
}) {
  const severityColors = {
    ok: 'text-green-600 bg-green-50',
    warning: 'text-yellow-600 bg-yellow-50',
    error: 'text-red-600 bg-red-50',
  }

  const severityIcons = {
    ok: '✓',
    warning: '⚠',
    error: '✕',
  }

  return (
    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
        <h3 className="font-semibold text-gray-900">Diagnostik</h3>
        <button
          onClick={onRun}
          disabled={isLoading}
          className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded hover:bg-primary-700 disabled:opacity-50 transition-colors"
        >
          {isLoading ? 'Prüfe...' : 'Diagnose starten'}
        </button>
      </div>
      <div className="p-4">
        {diagnostics.length === 0 ? (
          <p className="text-gray-500 text-center py-4">
            Klicke auf &quot;Diagnose starten&quot; um die Szene zu prüfen
          </p>
        ) : (
          <div className="space-y-2">
            {diagnostics.map((d, index) => (
              <div
                key={index}
                className={`flex items-center gap-3 p-2 rounded ${severityColors[d.severity]}`}
              >
                <span className="font-bold">{severityIcons[d.severity]}</span>
                <span className="text-sm font-medium">{d.category}</span>
                <span className="text-sm flex-1">{d.message}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}