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

interface StatCardProps {
  label: string;
  value: string;
  delta?: string;
  deltaDirection?: "up" | "down" | "neutral";
  icon?: ReactNode;
  iconClassName?: string;
}

export function StatCard({
  label,
  value,
  delta,
  deltaDirection = "neutral",
  icon,
  iconClassName,
}: StatCardProps) {
  const deltaColor =
    deltaDirection === "up"
      ? "text-success"
      : deltaDirection === "down"
        ? "text-danger"
        : "text-muted";

  return (
    <div className="rounded border border-border bg-card p-[18px_20px] shadow">
      <div className="mb-2.5 flex items-start justify-between">
        <span className="text-xs font-semibold text-muted">{label}</span>
        {icon && (
          <div
            className={cn(
              "flex h-[30px] w-[30px] items-center justify-center rounded-sm",
              iconClassName
            )}
          >
            {icon}
          </div>
        )}
      </div>
      <div className="font-mono text-[26px] font-extrabold tracking-tight">
        {value}
      </div>
      {delta && (
        <div className={cn("mt-1 text-xs font-semibold", deltaColor)}>
          {delta}
        </div>
      )}
    </div>
  );
}