const FeatureCard = ({ Icon, title, description, color = 'teal' }) => {
  const colorClasses = {
    teal: 'bg-gradient-to-r from-teal-50 to-blue-50',
    blue: 'bg-gradient-to-r from-blue-50 to-cyan-50',
    emerald: 'bg-gradient-to-r from-emerald-50 to-teal-50',
    amber: 'bg-gradient-to-r from-amber-50 to-orange-50'
  };

  return (
    <div className="bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:border-teal-200 p-6">
      <div className="flex items-start gap-4">
        <div className={`p-3 rounded-xl ${colorClasses[color]} border border-gray-100`}>
          <Icon className="w-6 h-6" />
        </div>
        <div>
          <h4 className="font-bold text-gray-900 mb-2">{title}</h4>
          <p className="text-gray-600 text-sm">{description}</p>
        </div>
      </div>
    </div>
  );
};

export default FeatureCard;