import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";
import ToolkitCard from "../ToolkitCard";
import { useState } from "react";
import Image from "next/image";

interface Publication {
  id: string;
  feature_image: string;
  title: string;
  excerpt: string;
  author: {
    name: string;
    profile_image: string;
    bio: string;
  };
}

const publications: Publication[] = [
  {
    id: "1",
    feature_image: ImagePath.inspired1,
    title: "The Future of AI in Research",
    excerpt: "Exploring how artificial intelligence is revolutionizing research methodologies and data analysis.",
    author: {
      name: "Dr. Sarah Johnson",
      profile_image: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png",
      bio: "Research Scientist and AI Expert"
    }
  },
  {
    id: "2",
    feature_image: ImagePath.inspired2,
    title: "Quantum Computing Breakthroughs",
    excerpt: "Recent advancements in quantum computing and their implications for scientific research.",
    author: {
      name: "Dr. Michael Chen",
      profile_image: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png",
      bio: "Quantum Physicist and Researcher"
    }
  },
  {
    id: "3",
    feature_image: ImagePath.inspired3,
    title: "Sustainable Research Practices",
    excerpt: "Best practices for conducting environmentally conscious research in modern laboratories.",
    author: {
      name: "Dr. Emily Davis",
      profile_image: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png",
      bio: "Environmental Researcher and Sustainability Expert"
    }
  }
];

const Publication = () => {
  const [visiblePublicationsCount, setVisiblePublicationsCount] = useState<number>(3);

  const handleSeeMore = () => {
    setVisiblePublicationsCount((prevCount) => prevCount + 3);
  };

  return (
    <div className="my-20">
      <div className="text-center">
        <h1 className="my-20 text-3xl md:text-7xl font-semibold tracking-tight text-gray-900 dark:text-white">
          {Texts.f_p}
        </h1>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 max-w-screen-xl">
        {publications.length > 0 ? (
          publications.slice(0, visiblePublicationsCount).map((pub) => (
            <div
              key={pub.id}
              className="group transition duration-300 ease-in-out hover:bg-white bg-black text-white hover:text-black p-8 max-w-sm rounded-2xl dark:bg-gray-800 dark:border-gray-700 flex flex-col justify-between min-h-[500px] cursor-pointer"
              style={{
                cursor: `url(${ImagePath.circle_arrow_dark}), pointer`
              }}
            >
              {pub.feature_image && (
                <Image
                  className="rounded-lg object-cover"
                  src={pub.feature_image}
                  alt={pub.title || "Featured Publication"}
                  width={500}
                  height={250}
                  loading="lazy"
                  style={{ height: "250px" }}
                />
              )}
              <h5 className="my-8 text-xl font-semibold tracking-tight group-hover:text-black dark:text-gray-900">
                {pub.title}
              </h5>
              <p className="mb-3 text-lg font-normal text-gray-400 group-hover:text-gray-700 dark:text-gray-400 flex-grow">
                {pub.excerpt}
              </p>
              <hr className="h-px my-8 bg-gray-800 border-0 dark:bg-gray-700 group-hover:bg-gray-300" />
              <figcaption className="flex items-center justify-center">
                <>
                  <Image
                    className="rounded-2xl"
                    src={pub.author.profile_image}
                    alt={pub.author.name}
                    width={36}
                    height={36}
                    loading="lazy"
                  />
                  <div className="ml-6 font-medium text-left">
                    <div className="text-xl font-bold group-hover:text-black dark:text-white">
                      {pub.author.name}
                    </div>
                    <div className="text-base text-gray-500 group-hover:text-gray-700 dark:text-gray-400">
                      {pub.author.bio}
                    </div>
                  </div>
                </>
              </figcaption>
            </div>
          ))
        ) : (
          <p className="text-center text-gray-500">No publications found.</p>
        )}
      </div>

      {publications.length > visiblePublicationsCount && (
        <div className="text-center">
          <button
            type="button"
            onClick={handleSeeMore}
            className="my-20 bg-white text-black max-w-fit h-16 text-grey-900 focus:ring-4 focus:outline-none font-medium rounded-full text-xl px-5 py-2.5 text-center inline-flex items-center justify-center hover:bg-gray-100"
          >
            {Texts.see_more}
            <Image
              src={ImagePath.circle_arrow_dark}
              alt="See more"
              className="h-9 ml-6 arrow text-black animate-pulse"
              width={36}
              height={36}
              loading="lazy"
            />
          </button>
        </div>
      )}
    </div>
  );
};

export default Publication;
