import type { ReactNode } from 'react'

export default function KpiCard({ titulo, valor, detalle }: { titulo: string; valor: ReactNode; detalle?: string }) {
  return (
    <div className="border border-neutral-200 bg-white p-6">
      <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{titulo}</p>
      <p className="mt-2 text-3xl font-light text-neutral-900">{valor}</p>
      {detalle && <p className="mt-2 text-xs text-neutral-500">{detalle}</p>}
    </div>
  )
}