"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { FaChevronRight } from "react-icons/fa";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import FinalCTAImage from "@/public/user-viewing/final-cta.webp";
import type { UserViewingContent } from "@/lib/user-viewing-ghost-content";

function UserRecruitmentCTA({
  content,
}: {
  content: UserViewingContent["recruitment"];
}) {
  const router = useRouter();

  return (
    <>
      <div className="w-full mt-8 mx-auto">
        <Image
          alt="A diverse group of five professionals engaging in a lively discussion around a conference table in a modern office setting"
          className="object-cover h-[200px] md:h-[300px] lg:h-[600px] xl:h-[800px] xxl:h-[1000px] w-full"
          loading="eager"
          src={FinalCTAImage}
        />
      </div>
      <div className="bg-paleBlue flex flex-col items-center justify-center text-center text-black py-16 space-y-6 px-6 md:px-16 lg:px-36">
        <h2 className="font-inter font-black text-4xl md:text-5xl lg:text-6xl">
          {content.title}
        </h2>
        <p className="font-noto text-base md:text-lg">{content.lead}</p>
        <p className="font-noto text-base md:text-lg">{content.prompt}</p>
        <Button
          btnLabel="Book our services today"
          className="w-full md:w-96"
          customVariant="userViewing"
          endContent={<FaChevronRight />}
          onClick={() => router.push(INTERNAL_PAGES.client.contactUs.homepage)}
        />
      </div>
    </>
  );
}

export default UserRecruitmentCTA;