'use client'

import type { Stats } from '../types'

interface StatsOverviewProps {
  stats: Stats | null
}

export function StatsOverview({ stats }: StatsOverviewProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
        <div className="text-3xl font-bold text-slate-900">{stats?.total_alerts || 0}</div>
        <div className="text-sm text-slate-500">Alerts gesamt</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
        <div className="text-3xl font-bold text-blue-600">{stats?.new_alerts || 0}</div>
        <div className="text-sm text-slate-500">Neue Alerts</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
        <div className="text-3xl font-bold text-green-600">{stats?.kept_alerts || 0}</div>
        <div className="text-sm text-slate-500">Relevant</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
        <div className="text-3xl font-bold text-amber-600">{stats?.review_alerts || 0}</div>
        <div className="text-sm text-slate-500">Zur Pruefung</div>
      </div>
    </div>
  )
}