"use client";

import { useSearchParams } from "next/navigation";
import { useEffect, useState, lazy } from "react";
import { ProjectTypes } from "@/app/components/project/projectTypes";
import { getPaginatedProject } from "@/app/lib/getProject";
import Link from "next/link";
import Image from "next/image";


export default function ProjectList() {

  
  const searchParams = useSearchParams();
  const page = parseInt(searchParams.get("page") || "1", 10);
  const [posts, setPosts] = useState<ProjectTypes[]>([]);
  const [totalPages, setTotalPages] = useState<number>(1);

  useEffect(() => {
    const fetchData = async () => {
      const { posts, totalPages } = await getPaginatedProject(page);
      setPosts(posts);
      setTotalPages(totalPages);
    };

    fetchData();
  }, [page]);

  return (
    <>
      <div className="grid grid-cols-1 gap-15 pt-10 md:pt-20 md:gap-20">
        {posts.map((post) => (
          <div
            key={post.id}
            className="relative mx-auto flex w-full flex-col"
          >
            <Link
              href={`/project/${post.slug}`}
              className="flex w-full flex-col gap-5"
            >
              <div className="gap:4 flex w-full flex-col items-end md:flex-row md:gap-8">
                <div className="font-bogart flex w-full text-2xl md:w-[50%]">
                  {post.title}
                  <span className="relative top-1">
                    <i className="icon-[solar--arrow-right-up-broken]"></i>
                  </span>
                </div>
                <div className="flex w-full md:w-[50%]">
                  <div className="line-clamp-5 text-xs">{post.excerpt}</div>
                </div>
              </div>
              <div className="flex w-full">
                <Image
                  src={post.thumbImg}
                  alt={post.title}
                  width={1600}
                  height={900}
                  className="img-responsive"
                />
              </div>
            </Link>
          </div>
        ))}
      </div>

      <div className="flex w-full justify-center gap-10 p-10 align-middle">
        {page > 1 && (
          <Link href={`/project?page=${page - 1}`} className="inline-flex py-2">
            ← Previous
          </Link>
        )}

        {page < totalPages && (
          <Link href={`/project?page=${page + 1}`} className="inline-flex py-2">
            Next →
          </Link>
        )}
      </div>
    </>
  );
}