import React from 'react';
import { Rocket, Shield, Zap } from 'lucide-react';

const FeatureCardOne = () => {
  const features = [
    {
      icon: <Rocket className="w-8 h-8 text-blue-600" />,
      title: 'Fast Performance',
      description: 'Optimized for speed and performance with modern web standards.'
    },
    {
      icon: <Shield className="w-8 h-8 text-green-600" />,
      title: 'Secure by Default',
      description: 'Built with security best practices and regular updates.'
    },
    {
      icon: <Zap className="w-8 h-8 text-yellow-600" />,
      title: 'Easy to Use',
      description: 'Simple API and comprehensive documentation for quick setup.'
    }
  ];

  return (
    <section className="py-20 bg-white dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
            Why Choose Our Components?
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Everything you need to build modern web applications.
          </p>
        </div>
        <div className="grid md:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl text-center">
              <div className="flex justify-center mb-4">
                {feature.icon}
              </div>
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
                {feature.title}
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeatureCardOne;