"use client";

import Image from "next/image";
import { FaUsers, FaUserPlus, FaGlobeAmericas, FaGlobe } from "react-icons/fa";
import { Card, CardBody, CardHeader } from "@nextui-org/react";

import OurCommunityTile from "@/public/client/our-community-tile.webp";
import OurCommunityTileMobile from "@/public/client/our-community-tile-mobile.webp";
import type { CommunityIntroductionContent } from "@/lib/our-community-ghost-content";

const COMMUNITY_STAT_ICONS = [FaUsers, FaUserPlus, FaGlobeAmericas, FaGlobe];

function CommunityIntro({
  content,
}: {
  content: CommunityIntroductionContent;
}) {
  return (
    <section className="py-12 lg:py-24">
      <h1 className="text-4xl lg:text-7xl font-black font-inter relative text-center">
        {content.title}
      </h1>
      <h2 className="font-noto lg:text-xl mt-4 text-black dark:text-white max-w-7xl text-center mx-auto">
        {content.lead}
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-4 mt-8 max-w-7xl mx-auto">
        {content.stats.map((value, index) => {
          const Icon = COMMUNITY_STAT_ICONS[index];
          return (
            <Card
              key={index}
              className="light font-noto flex flex-col items-center text-center bg-gray-400/10 dark:bg-white/5 rounded-xl shadow-none p-6 text-black dark:text-white"
            >
              <CardHeader>
                <Icon className="text-4xl text-midnightBlue mb-4" />
              </CardHeader>
              <CardBody>
                <h3 className="text-2xl font-bold">{value.count}</h3>
                <p>{value.description}</p>
              </CardBody>
            </Card>
          );
        })}
      </div>
      <div className="mt-8 hidden lg:block w-full">
        <Image
          alt="A diverse group of 28 people of different ages, ethnicities, and genders, all smiling and looking directly at the camera. Each person is placed in a coloured square background, creating a vibrant and inclusive collage of faces."
          className="w-full object-contain"
          loading="eager"
          src={OurCommunityTile}
        />
      </div>
      <div className="mt-8 block lg:hidden">
        <Image
          alt="Collage of 16 diverse, smiling individuals, each in a colourful square background."
          className="w-full object-contain"
          loading="eager"
          src={OurCommunityTileMobile}
        />
      </div>
    </section>
  );
}

export default CommunityIntro;