// src\app\components\admin\blocks\FeaturesSection.tsx

'use client';

import { Check } from 'lucide-react';
import { FeaturesSectionProps } from '@/lib/page-builder/types';
import * as Icons from 'react-icons/fi';

export default function FeaturesSection({
  title = "Everything You Need, Nothing You Don't",
  description = "A complete foundation for your next project with all the features developers actually use",
  features = [],
  columns = 3,
  className = "",
  id
}: FeaturesSectionProps) {
  
  const getIcon = (iconName: string) => {
    const IconComponent = Icons[iconName as keyof typeof Icons];
    return IconComponent || Icons.FiStar;
  };

  const getGridClass = () => {
    return columns === 2 
      ? "grid md:grid-cols-2 gap-8"
      : "grid md:grid-cols-2 lg:grid-cols-3 gap-8";
  };

  return (
    <section id={id || "features"} className={`py-20 px-4 ${className}`}>
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">{description}</p>
        </div>

        <div className={getGridClass()}>
          {features.map((feature) => {
            const IconComponent = getIcon(feature.icon);
            
            return (
              <div
                key={feature.id}
                className="group bg-white border border-gray-200 rounded-2xl p-8 hover:shadow-xl transition-all hover:-translate-y-1"
              >
                <div className="w-12 h-12 bg-linear-to-br from-blue-50 to-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                  <div className="text-blue-600">
                    <IconComponent className="w-6 h-6" />
                  </div>
                </div>
                <h3 className="text-xl font-semibold mb-4">{feature.title}</h3>
                <p className="text-sm text-gray-600 mb-4">{feature.description}</p>
                {feature.items && feature.items.length > 0 && (
                  <ul className="space-y-3">
                    {feature.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="flex items-start gap-2 text-sm text-gray-600">
                        <Check className="w-4 h-4 text-green-500 mt-0.5 shrink-0" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}