import { Card, CardBody, CardHeader } from "@nextui-org/react";
import {
  FaUserTie,
  FaChartLine,
  FaMoneyBillWave,
  FaBriefcaseMedical,
  FaAccessibleIcon,
} from "react-icons/fa";
import { FaBriefcase } from "react-icons/fa6";

import type { ResearchAreasContent } from "@/lib/our-community-ghost-content";

const RESEARCH_AREA_ICONS = [
  FaUserTie,
  FaChartLine,
  FaMoneyBillWave,
  FaBriefcase,
  FaBriefcaseMedical,
  FaAccessibleIcon,
];

function ResearchExperience({ content }: { content: ResearchAreasContent }) {
  return (
    <section className="py-12 max-w-7xl mx-auto">
      <h1 className="text-3xl lg:text-6xl font-black font-inter text-center px-8 lg:px-36">
        {content.title}
      </h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 pt-16">
        {content.areas.map((area, index) => {
          const Icon = RESEARCH_AREA_ICONS[index];
          return (
            <Card
              key={index}
              className="bg-gray-400/10 dark:bg-white/5 rounded-xl shadow-none p-6 flex flex-col font-noto"
            >
              <CardHeader className="flex flex-col items-start">
                <Icon className="text-5xl mb-4 text-midnightBlue" />
                <h2 className="text-2xl font-bold text-gray-800 dark:text-white mt-2">
                  {area.title}
                </h2>
              </CardHeader>
              <CardBody>{area.description}</CardBody>
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export default ResearchExperience;