// Metric Card Component
import { ReactNode } from 'react';
import { clsx } from 'clsx';
import './MetricCard.css';

interface MetricCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
  variant?: 'primary' | 'success' | 'warning' | 'danger';
  onClick?: () => void;
  loading?: boolean;
  className?: string;
  children?: ReactNode;
}

export default function MetricCard({
  title,
  value,
  subtitle,
  trend,
  variant = 'primary',
  onClick,
  loading = false,
  className,
  children,
}: MetricCardProps) {
  const formattedValue =
    typeof value === 'number' ? value.toLocaleString('en-US', { maximumFractionDigits: 2 }) : value;

  return (
    <div
      className={clsx('metric-card', `metric-card--${variant}`, { 'metric-card--clickable': onClick }, className)}
      onClick={onClick}
    >
      <div className="metric-card__header">
        <h3 className="metric-card__title">{title}</h3>
        {trend && (
          <span
            className={clsx('metric-card__trend', {
              'metric-card__trend--positive': trend.isPositive,
              'metric-card__trend--negative': !trend.isPositive,
            })}
          >
            {trend.isPositive ? '↑' : '↓'} {Math.abs(trend.value)}%
          </span>
        )}
      </div>
      {loading ? (
        <div className="metric-card__skeleton">{'\u00A0'}</div>
      ) : (
        <>
          <div className="metric-card__value">{formattedValue}</div>
          {subtitle && <div className="metric-card__subtitle">{subtitle}</div>}
          {children && <div className="metric-card__content">{children}</div>}
        </>
      )}
    </div>
  );
}

