import React from 'react';
import { ArrowDownOnSquareStackIcon, BookOpenIcon, ChartBarIcon, DocumentTextIcon, LightBulbIcon } from '@heroicons/react/24/outline';
import Card from '../Components/Card';

const FeatureCard: React.FC<{ icon: React.ElementType, title: string, children: React.ReactNode }> = ({ icon: Icon, title, children }) => {
  return (
    <Card>
      <Icon className="h-10 w-10 text-indigo-400 mb-4 mx-auto" />
      <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
      <p className="text-gray-400">{children}</p>
    </Card>
  );
};

const FeaturesSection: React.FC = () => {
  return (
    <section id="features" className="py-20">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center text-white mb-12">
          Por que OpenCand?
        </h2>
        <div className="flex flex-wrap justify-center gap-8">
          <FeatureCard icon={DocumentTextIcon} title="Acesso Simplificado">
            Navegue facilmente por dados complexos do TSE com uma interface limpa e amigável.
          </FeatureCard>
          <FeatureCard icon={ChartBarIcon} title="Visualizações Claras">
            Entenda as tendências e padrões com gráficos e resumos visuais dos dados eleitorais.
          </FeatureCard>
          <FeatureCard icon={LightBulbIcon} title="Insights Valiosos">
            Obtenha informações relevantes sobre candidatos, partidos e financiamento de campanhas.
          </FeatureCard>
          <FeatureCard icon={BookOpenIcon} title="Open Source">
            Contribua para um projeto aberto e transparente, ajudando a melhorar a plataforma para todos.
          </FeatureCard>
          <FeatureCard icon={ArrowDownOnSquareStackIcon} title="Dados Abertos">
            Os dados são acessíveis através do TSE e também disponibilizados em nosso repositório GitHub, garantindo transparência e confiabilidade.
          </FeatureCard>
        </div>
      </div>
    </section>
  );
};

export default FeaturesSection;