import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/react/24/solid';

interface MetricsCardProps {
  title: string;
  value: string;
  trend?: 'up' | 'down';
  subtitle?: string;
}

export function MetricsCard({ title, value, trend, subtitle }: MetricsCardProps) {
  return (
    <div className="bg-background p-4 rounded-lg border border-border">
      <h4 className="text-sm font-medium text-text-secondary mb-1">{title}</h4>
      <div className="flex items-center gap-2">
        <p className={`text-2xl font-bold ${
          trend === 'up' ? 'text-success' : 
          trend === 'down' ? 'text-error' : 
          'text-text-primary'
        }`}>
          {value}
        </p>
        {trend && (
          <span className={`inline-flex ${
            trend === 'up' ? 'text-success' : 'text-error'
          }`}>
            {trend === 'up' ? 
              <ArrowUpIcon className="w-4 h-4" /> : 
              <ArrowDownIcon className="w-4 h-4" />
            }
          </span>
        )}
      </div>
      {subtitle && (
        <p className="text-xs text-text-muted mt-1">{subtitle}</p>
      )}
    </div>
  );
}