"use client";

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

import type { ServiceFeaturePost } from "@/components/pages/client/services/services";
import Button from "@/components/common/button";

type CaseStudiesProps = {
  post: ServiceFeaturePost;
  title?: string;
  subtitle?: string;
};

function CaseStudy({
  post,
  title = "Case study",
  subtitle = "Real success stories: how our clients achieve their research goals with People for Research.",
}: CaseStudiesProps) {
  const pathname = usePathname();
  const router = useRouter();

  const handleOnClick = () => {
    router.push(`${pathname}/${post.slug}`);
  };

  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-96 w-screen"
          height={1200}
          loading="eager"
          src={post.feature_image || ""}
          width={1200}
        />
        <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-xl font-bold text-center lg:text-start mx-12 lg:mx-0">
            {post.title}
          </span>
          <Button
            btnLabel="Read more"
            customVariant="client"
            endContent={<FaChevronRight />}
            onClick={handleOnClick}
          />
        </div>
      </div>
    </section>
  );
}

export default CaseStudy;