import React from 'react';
import { useCurrency } from '../../features/payments/contexts/CurrencyContext';
import { getCurrencySymbol } from '../utils/format';

interface CurrencyIconProps {
  className?: string;
  size?: number;
  currency?: string; 
}

const CurrencyIcon: React.FC<CurrencyIconProps> = ({ 
  className = '', 
  size = 24,
  currency 
}) => {
  const { currency: contextCurrency } = useCurrency();
  const currencyToUse = currency || contextCurrency || 'USD';
  const symbol = getCurrencySymbol(currencyToUse);

  return (
    <div 
      className={`flex items-center justify-center font-semibold ${className}`}
      style={{ 
        width: `${size}px`, 
        height: `${size}px`,
        fontSize: `${size * 0.6}px`,
        lineHeight: 1
      }}
      title={`${currencyToUse} currency symbol`}
    >
      {symbol}
    </div>
  );
};

export default CurrencyIcon;