import { Card, CardBody, CardFooter } from "@nextui-org/react";
import { useRouter } from "next/navigation";
import { FaChevronRight } from "react-icons/fa6";

import { Post } from "@/types/blog/blogTypes";
import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import PFRSamLogo from "@/components/common/sprites/pfr-sam-logo-sprite";
import { truncateText } from "@/utils/text-utils";
import type { ParticipantHomeContent } from "@/lib/participant-home-ghost-content";

type LatestPostsProps = {
  content: ParticipantHomeContent["articles"];
  recentPosts: Post[];
};

function LatestPosts({ content, recentPosts }: LatestPostsProps) {
  const router = useRouter();

  const handleOnPress = (slug: string, section: string) => {
    const sectionWithoutHash = section.split("#")[1];
    router.push(
      `${INTERNAL_PAGES.participant.howItWorks.homepage}/${sectionWithoutHash}/${slug}`,
    );
  };

  const handleLearnMoreClick = () => {
    router.push(INTERNAL_PAGES.participant.howItWorks.homepage);
  };

  return (
    <div className="bg-participant-light dark:bg-participant-dark py-24 text-center">
      <div className="mx-auto max-w-4xl px-8 lg:px-0">
        <span className="text-center font-noto text-sm font-medium tracking-widest uppercase">
          {content.eyebrow}
        </span>
        <h2 className="mt-2 text-3xl font-black sm:text-6xl font-inter">
          {content.heading.leadingText}{" "}
          <span className="text-participant-bittersweet dark:text-participant-cerulean">
            {content.heading.highlight}
          </span>
        </h2>
        <p className="mt-6 text-lg font-noto">{content.lead}</p>
      </div>
      <div className="max-w-7xl p-8 mx-auto">
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 p-2">
          {recentPosts.map((post, index) => {
            return (
              <Card
                key={`${post.title}-${index}`}
                disableAnimation
                isPressable
                className="bg-gray-200/70 dark:bg-[#383934] shadow-none relative flex w-full text-left h-72 group rounded-lg"
                onPress={() => handleOnPress(post.slug, post.tags[0].name)}
              >
                <CardBody className="absolute top-0 left-0 right-0 flex items-start ps-2">
                  <span className="font-bold text-3xl ps-1 mt-1 font-inter hover:underline pe-16">
                    {post.title.length > 75
                      ? truncateText(post.title, 75)
                      : post.title}
                  </span>
                </CardBody>
                <CardFooter className="absolute bottom-0 left-0 right-0 flex flex-row items-center place-self-center space-x-1 ps-2">
                  <div className="bg-white rounded-full p-0.5">
                    <PFRSamLogo fill="#000" height={20} width={20} />
                  </div>
                  <p className="font-inter font-semibold text-sm">
                    People for Research
                  </p>
                  <span className="text-sm text-[##42484e] font-semibold ps-1">
                    {"on " +
                      new Date(post.updated_at).toLocaleString("default", {
                        month: "long",
                        year: "numeric",
                      })}
                  </span>
                </CardFooter>
              </Card>
            );
          })}
        </div>
      </div>
      <div className="mt-4 mx-auto">
        <Button
          btnLabel="Learn everything about us"
          customVariant="primary"
          endContent={<FaChevronRight />}
          onClick={handleLearnMoreClick}
        />
      </div>
    </div>
  );
}

export default LatestPosts;