frontend/src/components/MetricCard.tsx

// src/components/MetricCard.tsx
import React from 'react';
import type { ReactNode } from 'react';
import { TrendingDown, TrendingUp } from 'lucide-react';

export default function MetricCard({
  title, value, change, positive, icon, description
}: {
  title: string; value: string; change?: string; positive?: boolean; icon: ReactNode; description?: string;
}) {
  return (
    <div className="bg-white rounded-lg shadow-sm border p-6 hover:shadow-md transition-shadow">
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <p className="text-sm font-medium text-gray-600">{title}</p>
          <p className="text-2xl font-bold text-gray-900 mt-1">{value}</p>
          {change && (
            <div className="flex items-center mt-2">
              {positive ? <TrendingDown className="w-4 h-4 text-green-500 mr-1" /> : <TrendingUp className="w-4 h-4 text-red-500 mr-1" />}
              <span className={`text-sm font-medium ${positive ? 'text-green-600' : 'text-red-600'}`}>{change}</span>
            </div>
          )}
          {description && <p className="text-xs text-gray-500 mt-1">{description}</p>}
        </div>
        <div className="p-3 bg-blue-50 rounded-full">{icon}</div>
      </div>
    </div>
  );
}