import React from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react';

interface TrendIndicatorProps {
  value: number;
  format?: 'percent' | 'currency' | 'number';
  showArrow?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

export const TrendIndicator: React.FC<TrendIndicatorProps> = ({
  value,
  format = 'percent',
  showArrow = true,
  size = 'sm',
}) => {
  const isPositive = value >= 0;
  const color = isPositive ? 'text-positive' : 'text-negative';
  const Icon = isPositive ? TrendingUp : TrendingDown;

  const formatValue = (): string => {
    switch (format) {
      case 'percent':
        return `${isPositive ? '+' : ''}${value.toFixed(2)}%`;
      case 'currency':
        return `${isPositive ? '+' : ''}$${value.toFixed(2)}`;
      case 'number':
        return `${isPositive ? '+' : ''}${value.toFixed(2)}`;
      default:
        return `${isPositive ? '+' : ''}${value}`;
    }
  };

  const sizeClasses = {
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-lg',
  };

  return (
    <div className={`flex items-center gap-1 font-mono ${color} ${sizeClasses[size]}`}>
      {showArrow && <Icon className="h-3 w-3 sm:h-4 sm:w-4" />}
      <span>{formatValue()}</span>
    </div>
  );
};
