import { GoArrowDownLeft, GoArrowUpRight } from 'react-icons/go'

export default function GrowthIndicator({
  value,
  label,
}: {
  value: number
  label?: string
}) {
  if (value === 0) return null

  return (
    <span
      className={`flex items-center text-nowrap text-sm ${value > 0 ? 'text-green-500' : 'text-red-500'}`}
    >
      {value > 0 ? (
        <GoArrowUpRight className="w-4 h-4" />
      ) : (
        <GoArrowDownLeft className="w-4 h-4" />
      )}
      {value > 0 ? '+' : ''}
      {value}%{label ? ` ${label}` : ''}
    </span>
  )
}