import React from 'react';
import { TrendIndicator } from './TrendIndicator';

interface PriceDisplayProps {
  price: number;
  change: number;
  changePercent?: number;
  inline?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

export const PriceDisplay: React.FC<PriceDisplayProps> = ({
  price,
  change,
  changePercent,
  inline = false,
  size = 'lg',
}) => {
  const sizeClasses = {
    sm: 'text-2xl',
    md: 'text-3xl',
    lg: 'text-4xl',
  };

  if (inline) {
    return (
      <div className="flex items-start gap-4">
        <div className="text-right">
          <div className={`${sizeClasses[size]} font-mono font-bold text-term-text`}>
            ${price.toFixed(2)}
          </div>
          <TrendIndicator value={changePercent ?? change} format="percent" showArrow size="sm" />
        </div>
      </div>
    );
  }

  return (
    <div className="flex items-start gap-4">
      <div className="text-right">
        <div className={`${sizeClasses[size]} font-mono font-bold text-term-text`}>
          ${price.toFixed(2)}
        </div>
        <TrendIndicator value={changePercent ?? change} format="percent" showArrow size="sm" />
      </div>
    </div>
  );
};
