'use client'

import type { ConsentStats } from '../_types'

export function StatsTab({ consentStats }: { consentStats: ConsentStats }) {
  return (
    <div className="p-6">
      <h2 className="text-lg font-semibold text-slate-900 mb-6">Statistiken</h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div className="bg-slate-50 rounded-xl p-6">
          <div className="text-3xl font-bold text-slate-900">{consentStats.activeConsents}</div>
          <div className="text-sm text-slate-500 mt-1">Aktive Zustimmungen</div>
        </div>
        <div className="bg-slate-50 rounded-xl p-6">
          <div className="text-3xl font-bold text-slate-900">{consentStats.documentCount}</div>
          <div className="text-sm text-slate-500 mt-1">Dokumente</div>
        </div>
        <div className="bg-slate-50 rounded-xl p-6">
          <div className={`text-3xl font-bold ${consentStats.openDSRs > 0 ? 'text-orange-600' : 'text-slate-900'}`}>
            {consentStats.openDSRs}
          </div>
          <div className="text-sm text-slate-500 mt-1">Offene DSR-Anfragen</div>
        </div>
      </div>

      <div className="border border-slate-200 rounded-lg p-6">
        <h3 className="font-semibold text-slate-900 mb-4">Zustimmungsrate nach Dokument</h3>
        <div className="text-center py-8 text-slate-400 text-sm">
          Diagramm wird in einer zukuenftigen Version verfuegbar sein
        </div>
      </div>
    </div>
  )
}