'use client';

import { ReactNode } from 'react';

interface MetricCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: ReactNode;
  color?: 'blue' | 'green' | 'red' | 'yellow' | 'gray';
  trend?: { value: number; isUp: boolean };
}

const colorClasses = {
  blue: 'text-blue-400 bg-blue-400/10',
  green: 'text-green-400 bg-green-400/10',
  red: 'text-red-400 bg-red-400/10',
  yellow: 'text-yellow-400 bg-yellow-400/10',
  gray: 'text-gray-400 bg-gray-400/10',
};

export function MetricCard({
  title,
  value,
  subtitle,
  icon,
  color = 'blue',
  trend,
}: MetricCardProps) {
  return (
    <div className="bg-gray-900/50 rounded-lg border border-gray-800 p-4 hover:border-gray-700 transition-colors">
      <div className="flex items-center justify-between">
        <span className="text-sm text-gray-400">{title}</span>
        {icon && (
          <div className={`p-2 rounded-lg ${colorClasses[color]}`}>
            {icon}
          </div>
        )}
      </div>
      <div className="mt-2 flex items-baseline gap-2">
        <span className="text-3xl font-bold text-white">{value}</span>
        {trend && (
          <span
            className={`text-sm ${
              trend.isUp ? 'text-green-400' : 'text-red-400'
            }`}
          >
            {trend.isUp ? '↑' : '↓'} {Math.abs(trend.value)}%
          </span>
        )}
      </div>
      {subtitle && (
        <p className="mt-1 text-sm text-gray-500">{subtitle}</p>
      )}
    </div>
  );
}
