"use client";

/**
 * TrendBadge — colored pill for period-over-period delta.
 * Positive = emerald, negative = rose, zero/no-data = neutral grey.
 * Matches the platform's accent palette (emerald / rose / amber).
 */

import { ArrowDown, ArrowUp, Minus } from "lucide-react";

interface Props {
  /** Percent change. -100 to +∞. NaN / Infinity / undefined render
   *  as the neutral state. */
  pct: number | null | undefined;
  /** Compact = number-only; default = arrow + number. */
  variant?: "default" | "compact";
}

export function TrendBadge({ pct, variant = "default" }: Props) {
  const valid = pct != null && Number.isFinite(pct);
  const isUp = valid && pct! > 0;
  const isDown = valid && pct! < 0;
  const isFlat = valid && pct === 0;

  const cls = isUp ? "bg-emerald-50 text-emerald-700"
    : isDown ? "bg-rose-50 text-rose-700"
    : isFlat ? "bg-slate-100 text-slate-600"
    : "bg-slate-100 text-slate-400";

  const Icon = isUp ? ArrowUp : isDown ? ArrowDown : Minus;
  const display = valid
    ? `${isUp ? "+" : ""}${pct!.toFixed(pct! % 1 === 0 ? 0 : 1)}%`
    : "—";

  return (
    <span className={`inline-flex items-center gap-0.5 text-[10px] font-semibold px-1.5 py-0.5 rounded-full tabular-nums ${cls}`}>
      {variant === "default" && <Icon className="w-2.5 h-2.5" />}
      {display}
    </span>
  );
}
