import React from 'react';
import { MetricLabel } from './MetricLabel';
import { MetricValue } from './MetricValue';

export interface MetricProps {
  label: string;
  value: React.ReactNode;
  change?: number;
  changeLabel?: string;
  size?: 'sm' | 'md' | 'lg';
  sentiment?: 'positive' | 'negative' | 'neutral';
  inline?: boolean;
}

export const Metric: React.FC<MetricProps> = ({
  label,
  value,
  change,
  changeLabel,
  size = 'md',
  sentiment,
  inline = false,
}) => {
  const calculateSentiment = (): 'positive' | 'negative' | 'neutral' => {
    if (sentiment) return sentiment;
    if (change !== undefined) {
      return change >= 0 ? 'positive' : 'negative';
    }
    return 'neutral';
  };

  const displaySentiment = calculateSentiment();

  if (inline) {
    return (
      <div className="flex items-baseline gap-2">
        <MetricLabel>{label}</MetricLabel>
        <MetricValue size={size} sentiment={displaySentiment}>
          {value}
        </MetricValue>
        {change !== undefined && (
          <span className={`text-sm font-mono ${
            change >= 0 ? 'text-positive' : 'text-negative'
          }`}>
            {change >= 0 ? '+' : ''}{change.toFixed(2)}%
          </span>
        )}
      </div>
    );
  }

  return (
    <div className="metric-item">
      <MetricLabel>{label}</MetricLabel>
      <MetricValue size={size} sentiment={displaySentiment}>
        {value}
      </MetricValue>
      {change !== undefined && changeLabel && (
        <div className={`text-xs font-mono mt-1 ${
          change >= 0 ? 'text-positive' : 'text-negative'
        }`}>
          {changeLabel}: {change >= 0 ? '+' : ''}{change.toFixed(2)}%
        </div>
      )}
    </div>
  );
};
