components/FeatureCard.js

import { Zap, Smartphone, Layers } from 'lucide-react';

const iconMap = {
  Zap,
  Smartphone,
  Layers,
};

export default function FeatureCard({ title, description, icon }) {
  const IconComponent = iconMap[icon];

  return (
    <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow border border-gray-100 dark:border-gray-700">
      <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4 text-primary-600 dark:text-primary-300">
        {IconComponent && <IconComponent size={24} />}
      </div>
      <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
        {title}
      </h3>
      <p className="text-gray-600 dark:text-gray-400">
        {description}
      </p>
    </div>
  );
}