import React from 'react';

interface MetricValueProps {
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg';
  sentiment?: 'positive' | 'negative' | 'neutral';
}

export const MetricValue: React.FC<MetricValueProps> = ({
  children,
  size = 'md',
  sentiment,
}) => {
  const sizeClasses = {
    sm: 'text-base',
    md: 'text-lg',
    lg: 'text-2xl font-bold',
  };

  const sentimentClasses = {
    positive: 'text-[#00d26a]',
    negative: 'text-[#ff4757]',
    neutral: 'text-[#e0e0e0]',
  };

  return (
    <div className={`font-mono ${sizeClasses[size]} ${sentiment ? sentimentClasses[sentiment] : 'text-[#e0e0e0]'}`}>
      {children}
    </div>
  );
};
