export default function StatCard({
  label,
  value,
  sub,
  priority = false,
}) {
  return (
    <div
      className={`rounded-[10px] p-5 border transition-all duration-200 ${
        priority
          ? "border-[var(--accent)] shadow-[var(--accent-glow)] bg-[var(--bg-card)]"
          : "border-[var(--border-color)] shadow-[var(--shadow-card-md)] bg-[var(--bg-card)]"
      }`}
    >
      <div className="text-[11px] font-medium tracking-[0.06em] uppercase text-[var(--text-muted)] mb-[10px]">
        {label}
      </div>
      <div
        className={`font-mono text-[34px] font-medium tracking-[-0.02em] leading-none mb-[2px] ${
          priority ? "text-[var(--accent-text)]" : "text-[var(--text-heading)]"
        }`}
      >
        {value}
      </div>
      {sub && (
        <div className="text-xs text-[var(--text-secondary)] mt-[6px]">
          {sub}
        </div>
      )}
    </div>
  );
}