"use client";
import { AWS_CDN_URL } from "@/utils/staticValues";
import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";

interface ItemProps {
  id: number;
  title: string;
  slug: string;
  excerpt: string;
  content: string;
  image: string;
}

const loadItem = 6;

interface JournalListProps {
  initialItems: ItemProps[];
}

export default function JournalList({ initialItems }: JournalListProps) {
  const [allItems] = useState<ItemProps[]>(initialItems);
  const [listItem, setListItem] = useState<ItemProps[]>([]);
  const [visibleCount, setVisibleCount] = useState<number>(loadItem);

  useEffect(() => {
    // Load initial posts
    setListItem(allItems.slice(0, visibleCount));
  }, [allItems, visibleCount]);

  useEffect(() => {
    // Scroll listener for infinite scroll
    const handleScroll = () => {
      if (
        window.innerHeight + window.scrollY >= document.body.offsetHeight - 300 &&
        listItem.length < allItems.length
      ) {
        // Load more posts
        setVisibleCount((prev) => prev + loadItem);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [listItem, allItems]);

  if (listItem.length === 0) {
    return <p>No journals found.</p>;
  }

  return (
    <>
      <div className="grid gap-4 grid-cols-1 md:grid-cols-3">
        {listItem.map((item) => (
          <Link
            key={item.id}
            href={`/journal/${item.slug}`}
            className="flex relative top-0 my-4 hover:-top-4 w-full flex-col gap-5 p-4 border border-dashed border-transparent hover:border-gray-950 transition-all duration-300"
          >
            {item.image && (
              <div className="border">
                <Image
                  src={`${AWS_CDN_URL}/${item.image}`}
                  alt={item.title}
                  width={640}
                  height={360}
                  className="img-responsive"
                />
              </div>
            )}
            <div className="flex w-full flex-col gap-2 md:w-[90%]">
              <div className="font-bogart text-xl/5">{item.title}</div>
              <p className="line-clamp-4 text-xs">{item.excerpt}</p>
            </div>
          </Link>
        ))}
      </div>

      {listItem.length < allItems.length && (
        <p className="mt-6 text-center text-gray-500">Loading more...</p>
      )}
    </>
  );
}