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

export interface TrendBadgeProps {
  value: number;          // -1..+1, 0 表示持平
  className?: string;
}

export default function TrendBadge({ value, className = '' }: TrendBadgeProps) {
  const isUp = value > 0.0001;
  const isDown = value < -0.0001;
  const cls = isUp
    ? 'bg-emerald-50 text-emerald-600'
    : isDown
      ? 'bg-red-50 text-red-600'
      : 'bg-slate-100 text-slate-500';
  const Icon = isUp ? ArrowUp : isDown ? ArrowDown : Minus;
  const sign = isUp ? '+' : '';
  return (
    <span className={`inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-[11px] font-bold ${cls} ${className}`}>
      <Icon size={11} />
      {sign}{(value * 100).toFixed(2)}%
    </span>
  );
}