import type { ReactNode } from 'react'

export default function KpiCard({
  titulo,
  valor,
  detalle,
  plano = false,
}: {
  titulo: string
  valor: ReactNode
  detalle?: string
  /** `plano` quita sombra/hover para anidar la tarjeta dentro de otra tarjeta */
  plano?: boolean
}) {
  return (
    <div
      className={`rounded-xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] ${
        plano ? '' : 'shadow-sm transition-shadow duration-200 ease-in-out hover:shadow-md'
      }`}
    >
      <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">{titulo}</p>
      <p className="mt-2 text-3xl font-light text-[#111827] dark:text-[#E2E8F0]">{valor}</p>
      {detalle && <p className="mt-2 text-xs text-[#64748B] dark:text-[#94A3B8]">{detalle}</p>}
    </div>
  )
}