"use client";

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

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { fetchPostById } from "@/services/blogActions";
import { PostData } from "@/types/blog/blogTypes";

type CTAServicesProps = {
  title: string;
  description: string;
  showLearnMore?: boolean;
  typeOfUsage: "services" | "our-community" | "case-study" | "guide";
  resourceId?: string;
};

function CTAServices({
  title,
  description,
  showLearnMore = true,
  typeOfUsage,
  resourceId,
}: CTAServicesProps) {
  const router = useRouter();
  const fetcher = (id: string) => fetchPostById(id);
  const { data: resource } = useSWR<PostData>([resourceId], fetcher);
  const isGuide = typeOfUsage === "guide";

  const handlePrimaryClick = () => {
    isGuide
      ? router.push(
          `${INTERNAL_PAGES.client.resources}/guide/${resource?.posts[0].slug}`,
        )
      : router.push(INTERNAL_PAGES.client.contactUs.homepage);
  };

  const handleLearnMoreClick = () => {
    router.push(INTERNAL_PAGES.client.whyUs);
  };

  return (
    <div className="bg-midnightBlue/50 m-8 p-8 lg:p-12 rounded-lg flex flex-col lg:flex-row justify-between items-center space-x-0 lg:space-x-6 max-w-7xl mx-auto">
      <div>
        <h2 className="text-2xl lg:text-3xl font-black font-inter text-center lg:text-start">
          {title}
        </h2>
        <h3 className="text-xl font-noto mt-2 text-center lg:text-start">
          {description}
        </h3>
      </div>
      <div className="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4 mt-4 lg:mt-0">
        <Button
          btnLabel={
            typeOfUsage === "guide"
              ? "Read the guide about our services"
              : "Get started"
          }
          customVariant="black"
          endContent={typeOfUsage === "guide" && <FaChevronRight />}
          size="lg"
          onClick={handlePrimaryClick}
        />
        {showLearnMore && typeOfUsage !== "guide" && (
          <Button
            btnLabel="Find out more about us"
            customVariant="transparent"
            endContent={<FaChevronRight />}
            onClick={handleLearnMoreClick}
          />
        )}
      </div>
    </div>
  );
}

export default CTAServices;