interface PriceTagProps {
  price: number
  previousPrice?: number
  trend?: string
}

export function PriceTag({ price, previousPrice, trend }: PriceTagProps) {
  const showTrend = trend && trend !== 'stable' && previousPrice !== undefined
  const isUp = trend === 'up'

  return (
    <span className="inline-flex items-center gap-1 font-mono text-xs select-none">
      <span className="font-bold bg-slate-900 px-1.5 py-0.5 border border-slate-800 text-slate-300">
        [{price.toFixed(2)}]
      </span>
      {showTrend && (
        <span
          className={`text-[10px] ${isUp ? 'text-emerald-400' : 'text-rose-500'}`}
        >
          {isUp ? '▲' : '▼'}
        </span>
      )}
    </span>
  )
}
