import React from 'react';
import { X, CheckCircle } from 'lucide-react';

interface ComparisonItem {
  title: string;
  without: string[];
  with: string[];
}

interface ComparisonSectionProps {
  title: string;
  items: ComparisonItem[];
}

export function ComparisonSection({ title, items }: ComparisonSectionProps) {
  return (
    <section className="px-4 py-24 bg-white">
      <div className="mx-auto max-w-7xl">
        <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
          {title}
        </h2>

        <div className="grid md:grid-cols-2 gap-8">
          {/* Sem Leiturama */}
          <div className="p-8 bg-gray-50 rounded-xl border border-gray-200">
            <div className="flex items-center gap-3 mb-8">
              <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                <X className="h-6 w-6 text-red-500" />
              </div>
              <h3 className="text-xl font-bold text-gray-900">
                Sem Leiturama
              </h3>
            </div>

            {items.map((category, index) => (
              <div key={index} className="mb-8 last:mb-0">
                <h4 className="font-bold text-gray-900 mb-4">{category.title}</h4>
                <ul className="space-y-3">
                  {category.without.map((item, idx) => (
                    <li key={idx} className="flex items-start gap-2">
                      <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
                      <span className="text-gray-600">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {/* Com Leiturama */}
          <div className="p-8 bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl 
            border-2 border-purple-200 transform hover:scale-[1.02] transition-transform">
            <div className="flex items-center gap-3 mb-8">
              <div className="w-12 h-12 bg-gradient-to-r from-purple-600 to-blue-500 
                rounded-full flex items-center justify-center">
                <CheckCircle className="h-6 w-6 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900">
                Com Leiturama
              </h3>
            </div>

            {items.map((category, index) => (
              <div key={index} className="mb-8 last:mb-0">
                <h4 className="font-bold text-gray-900 mb-4">{category.title}</h4>
                <ul className="space-y-3">
                  {category.with.map((item, idx) => (
                    <li key={idx} className="flex items-start gap-2">
                      <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
                      <span className="text-gray-600">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}