components/StatCard.jsx

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

export default function StatCard({ title, value, change, changeType = 'neutral', subtitle, icon: Icon }) {
  const ChangeIcon = changeType === 'up' ? TrendingUp : changeType === 'down' ? TrendingDown : Minus;
  const changeColor = changeType === 'up' ? 'text-green-400' : changeType === 'down' ? 'text-crimson-400' : 'text-obsidian-400';

  return (
    <div className="glass-panel rounded-xl p-6 hover:border-crimson-700/50 transition-all duration-300">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-xs font-mono text-obsidian-400 uppercase tracking-wider">{title}</p>
          <p className="text-2xl font-bold text-white mt-1">{value}</p>
          {change && (
            <div className={`flex items-center gap-1 mt-2 ${changeColor}`}>
              <ChangeIcon className="w-4 h-4" />
              <span className="text-sm font-medium">{change}</span>
            </div>
          )}
          {subtitle && <p className="text-xs text-obsidian-500 mt-2">{subtitle}</p>}
        </div>
        {Icon && (
          <div className="w-10 h-10 rounded-lg bg-crimson-900/30 flex items-center justify-center">
            <Icon className="w-5 h-5 text-crimson-400" />
          </div>
        )}
      </div>
    </div>
  );
}