// src/components/app/KpiCard.tsx
import * as React from "react"

export function KpiCard({
  title,
  value,
  hint,
  icon,
}: {
  title: string
  value: React.ReactNode
  hint: string
  icon: React.ReactNode
}) {
  return (
    <div className="rounded-2xl border bg-card p-5 shadow-sm">
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="text-sm text-muted-foreground">{title}</div>
          <div className="mt-2 text-2xl font-semibold">{value}</div>
          <div className="mt-1 text-xs text-muted-foreground">{hint}</div>
        </div>
        <div className="rounded-xl border bg-background p-2 text-primary">
          {icon}
        </div>
      </div>
    </div>
  )
}