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

export function StatCard({
  label,
  value,
  icon,
  gradient = "grad-primary",
  delta,
  hint,
  href,
}: {
  label: string;
  value: ReactNode;
  icon: ReactNode;
  gradient?: string;
  delta?: string;
  hint?: string;
  href?: string;
}) {
  const body = (
    <div className="flex h-full items-center gap-4 rounded-[20px] border border-ink-100 bg-surface p-4 shadow-[var(--shadow-sm)] transition-all duration-150 hover:-translate-y-0.5 hover:shadow-[var(--shadow-md)]">
      <span className={cn("flex size-11 shrink-0 items-center justify-center rounded-[14px] text-white", gradient)}>
        {icon}
      </span>
      <div className="min-w-0">
        <p className="truncate text-[12px] font-medium text-ink-500">{label}</p>
        <div className="flex items-baseline gap-2">
          <p className="font-num text-[26px] font-bold leading-tight text-ink-900">{value}</p>
          {delta ? <span className="text-[12px] font-semibold text-mint-500">{delta}</span> : null}
        </div>
        {hint ? <p className="truncate text-[11px] text-ink-500">{hint}</p> : null}
      </div>
    </div>
  );
  if (href) return <Link href={href}>{body}</Link>;
  return body;
}