import React from "react";

export const KPICard = ({ title, value, sub }) => {
  return (
    <div className="relative overflow-hidden rounded-[18px] border border-[var(--line)] bg-gradient-to-b from-white/4 to-white/2 p-4 shadow-[0_10px_30px_rgba(0,0,0,0.35)]">
      <div
        className="pointer-events-none absolute inset-[-1px] opacity-55"
        style={{
          background: "radial-gradient(600px 280px at 20% 0%, rgba(106,166,255,0.14), transparent 60%)",
        }}
      />
      <div className="relative">
        <p className="mb-2 text-xs text-[var(--muted)]">{title}</p>
        <p className="text-[22px] font-medium text-[var(--text)]">{value}</p>
        {sub && <p className="mt-2 text-xs text-[var(--muted)]">{sub}</p>}
      </div>
    </div>
  );
};
