interface StatusOverviewProps {
  configCount: number
  whitelistCount: number
  blacklistCount: number
  eventCount: number
  loading: boolean
  onRefresh: () => void
}

export function StatusOverview({
  configCount,
  whitelistCount,
  blacklistCount,
  eventCount,
  loading,
  onRefresh,
}: StatusOverviewProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-xl font-semibold text-slate-900">Middleware Status</h2>
        <button
          onClick={onRefresh}
          disabled={loading}
          className="px-4 py-2 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 transition-colors"
        >
          {loading ? 'Laden...' : 'Aktualisieren'}
        </button>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div className="text-2xl font-bold text-slate-900">{configCount}</div>
          <div className="text-sm text-slate-600">Middleware</div>
        </div>
        <div className="bg-green-50 rounded-lg p-4 border border-green-200">
          <div className="text-2xl font-bold text-green-600">{whitelistCount}</div>
          <div className="text-sm text-slate-600">Whitelist IPs</div>
        </div>
        <div className="bg-red-50 rounded-lg p-4 border border-red-200">
          <div className="text-2xl font-bold text-red-600">{blacklistCount}</div>
          <div className="text-sm text-slate-600">Blacklist IPs</div>
        </div>
        <div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
          <div className="text-2xl font-bold text-blue-600">{eventCount}</div>
          <div className="text-sm text-slate-600">Recent Events</div>
        </div>
      </div>
    </div>
  )
}
