import { ArrowDownRight, ArrowUpRight, Minus } from "@/components/ui/icons";
import { cn } from "@/lib/utils";
import { formatPercent } from "@/lib/format";

type Props = {
  value: number; // pourcentage signé
  inverted?: boolean; // pour les métriques où baisser = mieux (rebond, position)
  suffix?: string;
};

export function Delta({ value, inverted = false, suffix }: Props) {
  const isPositive = value > 0;
  const isNeutral = value === 0;
  const good = inverted ? !isPositive : isPositive;

  if (isNeutral) {
    return (
      <span className="inline-flex items-center gap-1 text-text-dim text-xs font-medium">
        <Minus className="size-3" />
        Stable
      </span>
    );
  }

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 text-xs font-medium",
        good ? "text-success" : "text-danger",
      )}
    >
      {isPositive ? <ArrowUpRight className="size-3" /> : <ArrowDownRight className="size-3" />}
      {formatPercent(Math.abs(value), { decimals: 1 })}
      {suffix && <span className="text-text-dim ml-0.5">{suffix}</span>}
    </span>
  );
}