import { LandmarkIcon, UsersIcon, Calendar } from "lucide-react";

const Feature = ({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode;
  title: string;
  description: string;
}) => {
  return (
    <div className="relative rounded-xl p-4 md:p-6 hover:bg-neutral-100 transition-colors">
      <div className="absolute flex items-center justify-center h-14 w-14 rounded-md bg-primary text-white">
        {icon}
      </div>
      <div className="ml-16">
        <h3 className="text-lg leading-6 font-medium text-neutral-dark font-heading">
          {title}
        </h3>
        <p className="mt-2 text-base text-gray-500">{description}</p>
      </div>
    </div>
  );
};

const Features = () => {
  return (
    <section className="py-20 md:py-28 lg:py-36 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <p className="text-4xl font-heading font-bold text-primary mb-4">
            Experience Nigeria's Heritage
          </p>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Discover the rich cultural history through our comprehensive
            exhibits, educational programs, and community engagement.
          </p>
        </div>

        <div className="mt-16 space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
          <Feature
            icon={<LandmarkIcon className="w-8 h-8" />}
            title="Historical Exhibits"
            description="Explore artifacts and exhibits documenting the West African Slave Trade and its impact on Nigerian history."
          />
          <Feature
            icon={<UsersIcon className="w-8 h-8" />}
            title="Community Engagement"
            description="Connect with others through our community forum, share stories, and participate in cultural discussions."
          />
          <Feature
            icon={<Calendar className="w-8 h-8" />}
            title="Educational Programs"
            description="Participate in guided tours, workshops, and educational sessions led by knowledgeable museum attendants."
          />
        </div>
      </div>
    </section>
  );
};

export default Features;
