import React from 'react';

interface SentimentBadgeProps {
  sentiment: 'bullish' | 'bearish' | 'neutral';
  size?: 'sm' | 'md';
  showLabel?: boolean;
}

export const SentimentBadge: React.FC<SentimentBadgeProps> = ({
  sentiment,
  size = 'sm',
  showLabel = true,
}) => {
  const sentimentConfig = {
    bullish: {
      label: 'Bullish',
      color: 'text-positive',
      bg: 'bg-positive/10',
      border: 'border-positive/20',
    },
    bearish: {
      label: 'Bearish',
      color: 'text-negative',
      bg: 'bg-negative/10',
      border: 'border-negative/20',
    },
    neutral: {
      label: 'Neutral',
      color: 'text-term-text-muted',
      bg: 'bg-neutral/10',
      border: 'border-neutral/20',
    },
  };

  const config = sentimentConfig[sentiment];
  const sizeClasses = size === 'sm' ? 'text-[10px] px-2 py-1' : 'text-xs px-3 py-1.5';

  return (
    <span className={`${sizeClasses} font-mono uppercase tracking-wide ${config.color} ${config.bg} border ${config.border} rounded`}>
      {showLabel && config.label}
    </span>
  );
};
