'use client'

import React from 'react'
import type { ObligationStats } from '../_types'

export default function StatsGrid({
  stats,
  complianceScore,
}: {
  stats: ObligationStats | null
  complianceScore: number | string | null
}) {
  const items = [
    { label: 'Ausstehend',       value: stats?.pending     ?? 0,  color: 'text-gray-600',   border: 'border-gray-200'   },
    { label: 'In Bearbeitung',   value: stats?.in_progress ?? 0,  color: 'text-blue-600',   border: 'border-blue-200'   },
    { label: 'Ueberfaellig',     value: stats?.overdue     ?? 0,  color: 'text-red-600',    border: 'border-red-200'    },
    { label: 'Abgeschlossen',    value: stats?.completed   ?? 0,  color: 'text-green-600',  border: 'border-green-200'  },
    { label: 'Compliance-Score', value: complianceScore ?? '—',   color: 'text-purple-600', border: 'border-purple-200' },
  ]
  return (
    <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
      {items.map(s => (
        <div key={s.label} className={`bg-white rounded-xl border ${s.border} p-5`}>
          <div className={`text-xs ${s.color}`}>{s.label}</div>
          <div className={`text-3xl font-bold mt-1 ${s.color}`}>{s.value}</div>
        </div>
      ))}
    </div>
  )
}