import { Card, CardBody, CardHeader } from "@nextui-org/react";
import {
  FcGlobe,
  FcCellPhone,
  FcProcess,
  FcFinePrint,
  FcCollaboration,
} from "react-icons/fc";

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

const STRATEGY_ICONS = [
  FcGlobe,
  FcCellPhone,
  FcProcess,
  FcFinePrint,
  FcCollaboration,
];

function Strategies({ content }: { content: GrowthStrategiesContent }) {
  return (
    <section className="py-12 max-w-7xl mx-auto">
      <h1 className="text-4xl lg:text-6xl font-black font-inter px-8 text-center">
        {content.title}
      </h1>
      <h2 className="font-noto text-lg lg:text-xl mt-4 text-black dark:text-white px-8 text-center">
        {content.lead}
      </h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 py-12 px-8">
        {content.strategies.map((strategy, index) => {
          const Icon = STRATEGY_ICONS[index];
          return (
            <Card
              key={index}
              className="font-noto light bg-gray-400/10 dark:bg-white/5 rounded-lg shadow-none p-6 flex flex-col items-center justify-center min-h-[200px]"
            >
              <CardHeader className="flex justify-center items-center pb-2">
                <Icon className="text-6xl text-midnightBlue" />
              </CardHeader>
              <CardBody className="text-xl text-gray-800 dark:text-white text-center flex items-center justify-center">
                {strategy}
              </CardBody>
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export default Strategies;