import React from 'react';
import type { MetricCardProps } from '../../types.js';

const metricColorClasses: Record<string, string> = {
  default: '', green: 'metric-green', blue: 'metric-blue', purple: 'metric-purple',
  yellow: 'metric-yellow', red: 'metric-red',
};
const trendClasses: Record<string, string> = { up: 'trend-up', down: 'trend-down', flat: 'trend-flat' };
const trendIcons: Record<string, string> = { up: '↑', down: '↓', flat: '→' };

export const MetricCard: React.FC<MetricCardProps> = ({ label, value, trend, trendValue, color = 'default' }) => (
  <div className="metric-card">
    <div className={`metric-value ${metricColorClasses[color] || ''}`}>{value}</div>
    <div className="metric-label">{label}</div>
    {trend && trendValue && (
      <div className={`metric-trend ${trendClasses[trend] || 'trend-flat'}`}>
        {trendIcons[trend] || '→'} {trendValue}
      </div>
    )}
  </div>
);
