import { FaChevronRight } from "react-icons/fa6";
import { useRouter } from "next/navigation";

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";

type ConnectedSectionProps =
  | { typeOfPage: "homepage"; content: ParticipantHomeContent["contact"] }
  | { typeOfPage: "howItWorks"; content?: never };

function ConnectedSection(props: ConnectedSectionProps) {
  const router = useRouter();

  const isHomepage = props.typeOfPage === "homepage";
  const title = isHomepage ? props.content.heading : "Still have questions?";

  const description = isHomepage
    ? props.content.lead
    : "We are here to help. If you have any questions, please don't hesitate to reach out to us.";

  const background = isHomepage ? "bg-baby-powder" : "";

  const handleGetInTouchClick = () => {
    router.push(INTERNAL_PAGES.participant.contactUs);
  };

  return (
    <div
      className={`${background} pb-24 pt-12 bg-participant-light dark:bg-participant-dark`}
    >
      <div className="max-w-7xl bg-gray-200/70 dark:bg-[#383934] flex flex-col items-center justify-center text-center space-y-4 rounded-3xl mx-8 p-12 lg:mx-auto">
        <h2 className="font-inter font-black text-3xl lg:text-4xl">
          {title}
          {isHomepage && (
            <span className="ms-2 inline-block text-4xl emoji">👋🏻</span>
          )}
          {!isHomepage && (
            <span className="ms-2 inline-block text-4xl">💡</span>
          )}
        </h2>
        <p className="text-lg font-noto max-w-4xl">{description}</p>
        <Button
          btnLabel="Get in touch with us"
          className="w-48 lg:w-96"
          customVariant="primary"
          endContent={<FaChevronRight />}
          onClick={handleGetInTouchClick}
        />
      </div>
    </div>
  );
}

export default ConnectedSection;