components/StatCard.jsx

import React from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react';

export default function StatCard({ title, value, change, positive, icon }) {
  return (
    <div className="card p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 relative overflow-hidden group">
      <div className="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-gradient-to-br from-primary-500/10 to-transparent rounded-full group-hover:scale-150 transition-transform duration-500"></div>
      <div className="flex items-center justify-between relative z-10">
        <div>
          <p className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            {title}
          </p>
          <p className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
            {value}
          </p>
          <div className="mt-2 flex items-center text-sm">
            {positive ? (
              <span className="flex items-center text-green-600 font-medium bg-green-50 px-2 py-0.5 rounded dark:bg-green-900/30 dark:text-green-400">
                <TrendingUp className="w-4 h-4 mr-1" />
                {change}
              </span>
            ) : (
              <span className="flex items-center text-red-600 font-medium bg-red-50 px-2 py-0.5 rounded dark:bg-red-900/30 dark:text-red-400">
                <TrendingDown className="w-4 h-4 mr-1" />
                {change}
              </span>
            )}
            <span className="ml-2 text-gray-500 dark:text-gray-400">
              vs last month
            </span>
          </div>
        </div>
        <div className="p-3 bg-gray-50 rounded-full dark:bg-gray-700/50 group-hover:bg-primary-50 dark:group-hover:bg-primary-900/20 transition-colors duration-300">
          {icon}
        </div>
      </div>
    </div>
  );
}