'use client'

interface StatsGridProps {
  total: number
  active: number
  revoked: number
  versionUpdates: number
}

export function StatsGrid({ total, active, revoked, versionUpdates }: StatsGridProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="text-sm text-gray-500">Gesamt</div>
        <div className="text-3xl font-bold text-gray-900">{total}</div>
      </div>
      <div className="bg-white rounded-xl border border-green-200 p-6">
        <div className="text-sm text-green-600">Aktive Einwilligungen</div>
        <div className="text-3xl font-bold text-green-600">{active}</div>
      </div>
      <div className="bg-white rounded-xl border border-red-200 p-6">
        <div className="text-sm text-red-600">Widerrufen</div>
        <div className="text-3xl font-bold text-red-600">{revoked}</div>
      </div>
      <div className="bg-white rounded-xl border border-blue-200 p-6">
        <div className="text-sm text-blue-600">Versions-Updates</div>
        <div className="text-3xl font-bold text-blue-600">{versionUpdates}</div>
      </div>
    </div>
  )
}