'use client'

import React from 'react'

export function StatsCards({
  total,
  implementedCount,
  avgEffectiveness,
  partialCount,
}: {
  total: number
  implementedCount: number
  avgEffectiveness: number
  partialCount: number
}) {
  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">Implementiert</div>
        <div className="text-3xl font-bold text-green-600">{implementedCount}</div>
      </div>
      <div className="bg-white rounded-xl border border-purple-200 p-6">
        <div className="text-sm text-purple-600">Durchschn. Wirksamkeit</div>
        <div className="text-3xl font-bold text-purple-600">{avgEffectiveness}%</div>
      </div>
      <div className="bg-white rounded-xl border border-yellow-200 p-6">
        <div className="text-sm text-yellow-600">Teilweise</div>
        <div className="text-3xl font-bold text-yellow-600">{partialCount}</div>
      </div>
    </div>
  )
}