import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

export function StatCard({
  label,
  value,
  sub,
  icon,
  tone = "default",
  className,
}: {
  label: string;
  value: ReactNode;
  sub?: ReactNode;
  icon?: ReactNode;
  tone?: "default" | "critical" | "warning" | "success" | "primary";
  className?: string;
}) {
  const toneClass = {
    default: "border-border",
    critical: "border-destructive/30 bg-destructive/[0.04]",
    warning: "border-warning/40 bg-warning/[0.06]",
    success: "border-success/30 bg-success/[0.04]",
    primary: "border-primary/30 bg-primary/[0.04]",
  }[tone];

  const iconTone = {
    default: "bg-secondary text-secondary-foreground",
    critical: "bg-destructive/10 text-destructive",
    warning: "bg-warning/20 text-warning-foreground",
    success: "bg-success/10 text-success",
    primary: "bg-primary/10 text-primary",
  }[tone];

  return (
    <div
      className={cn(
        "rounded-xl border bg-card p-4 shadow-[var(--shadow-panel)] sm:p-5",
        toneClass,
        className,
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            {label}
          </p>
          <p className="mt-1.5 font-display text-2xl font-bold tabular-nums text-foreground sm:text-3xl">
            {value}
          </p>
          {sub && <p className="mt-1 text-xs text-muted-foreground">{sub}</p>}
        </div>
        {icon && (
          <span className={cn("flex h-10 w-10 shrink-0 items-center justify-center rounded-lg", iconTone)}>
            {icon}
          </span>
        )}
      </div>
    </div>
  );
}