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-[#00d26a]',
      bg: 'bg-[#00d26a]/10',
      border: 'border-[#00d26a]/20',
    },
    bearish: {
      label: 'Bearish',
      color: 'text-[#ff4757]',
      bg: 'bg-[#ff4757]/10',
      border: 'border-[#ff4757]/20',
    },
    neutral: {
      label: 'Neutral',
      color: 'text-[#888888]',
      bg: 'bg-[#888888]/10',
      border: 'border-[#888888]/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>
  );
};
