import { ReactNode } from "react"

export function KpiCard({
  title,
  value,
  hint,
  icon,
}: {
  title: string
  value: string
  hint?: string
  icon?: 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="text-2xl font-semibold mt-1">{value}</div>
          {hint ? (
            <div className="text-xs text-muted-foreground mt-2">{hint}</div>
          ) : null}
        </div>
        {icon ? (
          <div className="h-10 w-10 rounded-2xl bg-primary/10 border flex items-center justify-center text-primary">
            {icon}
          </div>
        ) : null}
      </div>
    </div>
  )
}