import Image from "next/image";
import { IconType } from "react-icons";
import { FaClipboardList, FaMoneyBillWave, FaUserPlus } from "react-icons/fa6";

import HowItWorksImage from "@/public/how-it-works/how-it-works-1.webp";
import type { ParticipantHomeContent } from "@/lib/participant-home-ghost-content";

const STEP_ICONS: IconType[] = [FaUserPlus, FaClipboardList, FaMoneyBillWave];

type StepProps = {
  index: number;
  title: string;
  description: string;
  icon: IconType;
};

function StepCard({ index, title, description, icon: Icon }: StepProps) {
  return (
    <div>
      <div className="flex flex-col sm:flex-row items-center text-sm xxl:text-base xxxl:text-lg font-semibold leading-6">
        <div className="flex size-8 xxl:size-10 xxxl:size-12 items-center justify-center rounded-full bg-participant-bittersweet dark:bg-participant-cerulean mb-2 sm:mb-0">
          <Icon aria-hidden className="text-lg xxl:text-xl xxxl:text-2xl" />
        </div>
        <div className="flex flex-col sm:flex-row items-center sm:ms-4 text-base xxl:text-lg xxxl:text-xl">
          <span className="font-inter font-bold">Step {index + 1}</span>
          <span className="hidden sm:inline ms-2 h-4 w-px bg-slate-300"></span>
          <span className="ms-0 sm:ms-2 font-inter tracking-tight font-bold">
            {title}
          </span>
        </div>
      </div>
      <p className="mt-2 leading-6 text-gray-600 dark:text-gray-400 text-sm xxl:text-lg">
        {description}
      </p>
    </div>
  );
}

type HowItWorksProps = { content: ParticipantHomeContent["howItWorks"] };

function HowItWorks({ content }: HowItWorksProps) {
  return (
    <div className="mx-auto lg:max-w-none bg-participant-light dark:bg-participant-dark max-w-7xl flex flex-col lg:flex-row">
      <div className="lg:w-1/2 p-8 sm:p-20 xxl:p-24 xxxl:p-28">
        <div className="mx-auto lg:mx-0 text-start">
          <span className="text-center font-noto text-sm font-medium tracking-widest uppercase">
            {content.eyebrow}
          </span>
          <h2 className="mt-2 text-3xl font-black sm:text-6xl xxl:text-7xl font-inter">
            {content.heading}
          </h2>
          <p className="text-xl xxl:text-2xl font-bold sm:text-xl font-inter mt-4 xxl:mt-6 xxxl:mt-8">
            {content.lead}
          </p>
        </div>
        <div className="flex flex-col lg:flex-row">
          <ol className="mx-auto lg:mx-0 mt-16 xxl:mt-20 xxxl:mt-24 space-y-8 xxl:space-y-10 xxxl:space-y-12">
            {content.steps.map((item, index) => (
              <li key={`${index}-${item.title}`}>
                <StepCard
                  description={item.description}
                  icon={STEP_ICONS[index]}
                  index={index}
                  title={item.title}
                />
              </li>
            ))}
          </ol>
        </div>
      </div>
      <div className="lg:w-1/2 px-24 py-8">
        <Image
          alt="A diverse group of people sitting around a table, engrossed in their laptops, working together."
          className="object-cover w-full h-full rounded-lg"
          loading="eager"
          sizes="(min-width: 1536px) 50vw, (min-width: 1920px) 50vw, 100vw"
          src={HowItWorksImage}
        />
      </div>
    </div>
  );
}

export default HowItWorks;