'use client'

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

export default function StatsGrid({ stats }: { stats: ObligationStats | 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'},
  ]
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 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>
  )
}