export default function KPICard({
  label,
  value,
  color,
  unit,
  variation,
}) {
  const formattedValue =
    typeof value === 'number' ? value.toLocaleString('es-AR') : value

  return (
    <div className="rounded-[28px] border border-opsv-border bg-opsv-surface p-6 shadow-sm">
      <div className="flex flex-col items-center text-center gap-4">
        <div className="flex flex-col items-center">
          <div
            className="text-3xl font-black text-opsv-navy"
            style={color ? { color } : undefined}
          >
            {formattedValue}
            {unit ? (
              <span className="text-base font-semibold text-opsv-muted"> {unit}</span>
            ) : null}
          </div>
          <p className="mt-3 text-sm text-opsv-muted">{label}</p>
        </div>

        {variation ? (
          <div className="rounded-2xl bg-opsv-bg px-3 py-2 text-sm font-semibold text-opsv-text">
            {variation}
          </div>
        ) : null}
      </div>
    </div>
  )
}