import type { LucideIcon } from "@/components/ui/icons";
import { cn } from "@/lib/utils";
import { Delta } from "./delta";

type Props = {
  label: string;
  value: React.ReactNode;
  unit?: string;
  delta?: number;
  deltaInverted?: boolean;
  deltaSuffix?: string;
  icon?: LucideIcon;
  className?: string;
};

export function StatCard({ label, value, unit, delta, deltaInverted, deltaSuffix, icon: Icon, className }: Props) {
  return (
    <div className={cn("panel p-5 group transition-colors hover:border-border-strong", className)}>
      <div className="flex items-start justify-between">
        <span className="text-xxs font-medium uppercase tracking-wider text-text-dim">{label}</span>
        {Icon && (
          <span className="size-8 rounded-md bg-stone-900/[0.03] border border-border flex items-center justify-center text-text-muted group-hover:text-accent transition-colors">
            <Icon className="size-4" />
          </span>
        )}
      </div>
      <div className="mt-4 flex items-baseline gap-2">
        <span className="font-editorial text-3xl font-medium text-text tabular-nums">{value}</span>
        {unit && <span className="text-xs text-text-dim font-medium">{unit}</span>}
      </div>
      {typeof delta === "number" && (
        <div className="mt-3">
          <Delta value={delta} inverted={deltaInverted} suffix={deltaSuffix} />
        </div>
      )}
    </div>
  );
}