import { useRouter } from "next/navigation";
import { IconType } from "react-icons";
import {
  FaChevronRight,
  FaCommentsDollar,
  FaGlobe,
  FaSeedling,
} from "react-icons/fa6";
import { FaHandHoldingUsd } from "react-icons/fa";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import type { ParticipantHomeContent } from "@/lib/participant-home-ghost-content";

const BENEFIT_ICONS: IconType[] = [
  FaGlobe,
  FaHandHoldingUsd,
  FaCommentsDollar,
  FaSeedling,
];

type Benefit = {
  icon: IconType;
  title: string;
  description: string;
};

type BenefitsTakingPartProps = {
  isLoggedIn?: boolean;
  content: ParticipantHomeContent["benefits"];
};

function BenefitsCard({ icon: Icon, title, description }: Benefit) {
  return (
    <div className="relative ps-16 xxl:ps-20 xxxl:ps-24">
      <dt className="text-xl xxl:text-2xll font-extrabold font-inter">
        <div className="absolute left-0 top-0 flex size-10 xxl:size-12 xxxl:size-14 rounded-full items-center justify-center bg-participant-bittersweet dark:bg-participant-cerulean">
          <Icon aria-hidden className="xxl:text-lg xxxl:text-xl" />
        </div>
        {title}
      </dt>
      <dd className="mt-2 text-base xxl:text-lg text-gray-800 dark:text-gray-300 pe-4">
        {description}
      </dd>
    </div>
  );
}

function BenefitsTakingPart({
  isLoggedIn = false,
  content,
}: BenefitsTakingPartProps) {
  const router = useRouter();

  const handleButtonClick = (isLoggedIn: boolean) => {
    router.push(
      isLoggedIn
        ? INTERNAL_PAGES.participant.opportunities.main
        : INTERNAL_PAGES.participant.signup.main,
    );
  };

  return (
    <div className="bg-participant-light dark:bg-participant-dark py-12">
      <div className="mx-auto max-w-7xl px-6 lg:px-8 xxl:px-12 xxxl:px-16">
        <div className="mx-auto max-w-2xl lg:text-center xxl:max-w-3xl xxxl:max-w-4xl">
          <span className="text-center font-noto text-sm font-semibold tracking-widest uppercase">
            {content.eyebrow}
          </span>
          <h2 className="mt-2 text-4xl font-black sm:text-7xl font-inter">
            {content.heading.leadingText}{" "}
            <span className="text-participant-bittersweet dark:text-participant-cerulean">
              {content.heading.highlight}
            </span>
            {content.heading.trailingText}
          </h2>
          <p className="pt-8 text-xl xxl:text-2xl">{content.lead}</p>
        </div>
        <div className="mx-auto mt-16 xxl:mt-20 xxxl:mt-24 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16 xxl:gap-x-12 xxl:gap-y-20 xxxl:gap-x-16 xxxl:gap-y-24">
            {content.benefits.map((benefit, index) => (
              <BenefitsCard
                key={index}
                description={benefit.description}
                icon={BENEFIT_ICONS[index]}
                title={benefit.title}
              />
            ))}
          </dl>
        </div>
        <div className="mt-16 xxl:mt-20 xxxl:mt-24 flex justify-center">
          <Button
            btnLabel={
              isLoggedIn ? "Apply to opportunities" : "Join our community today"
            }
            className="w-96 xxl:w-[28rem] xxxl:w-[32rem] xxl:py-3 xxxl:py-4"
            customVariant="primary"
            endContent={<FaChevronRight />}
            onClick={() => handleButtonClick(isLoggedIn)}
          />
        </div>
      </div>
    </div>
  );
}

export default BenefitsTakingPart;