'use client'

import type { SeveritySummary, ScanType } from '../types'

interface SecurityHeaderProps {
  overallStatus: { label: string; color: string }
  summary: SeveritySummary
  scanning: string | null
  onRunScan: (scanType: ScanType) => void
}

export function SecurityHeader({ overallStatus, summary, scanning, onRunScan }: SecurityHeaderProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
      <div className="flex justify-between items-center mb-6">
        <div className="flex items-center gap-4">
          <h2 className="text-xl font-semibold text-slate-900">Security Status</h2>
          <span className={`px-3 py-1 rounded-full text-sm font-semibold ${overallStatus.color}`}>
            {overallStatus.label}
          </span>
        </div>
        <div className="flex items-center gap-3">
          <span className="flex items-center gap-2 text-sm text-slate-500">
            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            Auto-Refresh aktiv
          </span>
          <button
            onClick={() => onRunScan('all')}
            disabled={scanning !== null}
            className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
              scanning === 'all'
                ? 'bg-orange-200 text-orange-800'
                : 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
            }`}
          >
            {scanning === 'all' ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
                <span>Full Scan laeuft...</span>
              </>
            ) : (
              'Full Scan starten'
            )}
          </button>
        </div>
      </div>

      {/* Severity Summary */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {([
          { key: 'critical', border: 'border-red-500', text: 'text-red-600', label: 'Critical' },
          { key: 'high', border: 'border-orange-500', text: 'text-orange-600', label: 'High' },
          { key: 'medium', border: 'border-yellow-500', text: 'text-yellow-600', label: 'Medium' },
          { key: 'low', border: 'border-green-500', text: 'text-green-600', label: 'Low' },
          { key: 'info', border: 'border-blue-500', text: 'text-blue-600', label: 'Info' },
          { key: 'total', border: 'border-slate-400', text: 'text-slate-700', label: 'Total' },
        ] as const).map(({ key, border, text, label }) => (
          <div key={key} className={`border-l-4 ${border} bg-slate-50 rounded-r-lg p-4`}>
            <div className={`text-3xl font-bold ${text}`}>{summary[key]}</div>
            <div className="text-sm text-slate-600">{label}</div>
          </div>
        ))}
      </div>
    </div>
  )
}