"use client";

import Image from "next/image";
import { FaChevronRight } from "react-icons/fa";
import { useTheme } from "next-themes";
import toast from "react-hot-toast";

import Button from "@/components/common/button";
import type { ServiceResourcePost } from "@/components/pages/client/services/services";
import { downloadArticlePdf } from "@/utils/download-article-pdf";

type ResourceCTAProps = {
  post: ServiceResourcePost;
  title?: string;
  subtitle?: string;
};

function ResourceCTA({
  post,
  title = "See how we work.",
  subtitle = "Everything you need to know about this service - all in one guide.",
}: ResourceCTAProps) {
  const { theme } = useTheme();
  const { title: postTitle, downloadUrl } = post;

  const handleDownload = async () => {
    try {
      await downloadArticlePdf(downloadUrl, postTitle);

      toast.success(`"${postTitle}" downloaded successfully to your device.`);
    } catch (error) {
      toast.error(
        "Download failed. Please try again. If the error persists, contact us.",
      );
    }
  };

  return (
    <section className="my-24">
      <h2 className="text-3xl md:text-5xl lg:text-7xl font-black font-inter mb-2 ps-8">
        {title}
      </h2>
      <p className="font-noto text-xl text-gray-700 dark:text-gray-200 ps-8">
        {subtitle}
      </p>
      <div className="w-full my-8 relative">
        <Image
          alt={post.feature_image_alt || ""}
          className="object-cover rounded-none h-72 w-screen"
          height={1000}
          loading="eager"
          src={post.feature_image}
          width={1000}
        />
        <div className="absolute inset-0 bg-black dark:bg-white opacity-40 z-10"></div>
        <div className="absolute inset-0 flex flex-col items-center justify-center z-10 space-y-4">
          <span className="font-noto text-white dark:text-black text-3xl font-bold text-center lg:text-start mx-12 lg:mx-0">
            The complete guide to {post.title}
          </span>
          <Button
            btnLabel="Access the guide"
            className="w-72"
            customVariant={theme === "dark" ? "black" : "white"}
            endContent={<FaChevronRight />}
            size="lg"
            onClick={handleDownload}
          />
        </div>
      </div>
    </section>
  );
}

export default ResourceCTA;