frontend/src/components/Card.js

import React from 'react';

const Card = ({ children, className = '', title, icon: Icon }) => {
  return (
    <div className={`bg-white dark:bg-slate-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl dark:shadow-slate-900/50 transition-all duration-300 transform hover:scale-[1.01] border border-gray-300 dark:border-slate-700 ${className}`}>
      {title && (
        <div className="border-b border-gray-300 dark:border-slate-700 px-6 py-4 bg-gradient-to-r from-gray-100 via-gray-50 to-transparent dark:from-slate-700/50 dark:to-transparent">
          <div className="flex items-center space-x-3">
            {Icon && (
              <div className="bg-gradient-to-br from-emerald-500/30 to-cyan-500/30 dark:bg-emerald-500/20 p-2 rounded-lg">
                <Icon className="text-emerald-700 dark:text-emerald-400 text-xl" />
              </div>
            )}
            <h3 className="text-xl font-bold text-gray-900 dark:text-slate-100">{title}</h3>
          </div>
        </div>
      )}
      <div className="p-6">
        {children}
      </div>
    </div>
  );
};

export default Card;