portfolio/app/components/Projects.tsx

import React, { useEffect, useState } from "react";
import Link from "next/link";

interface Project {
  slug: string;
  id: string;
  title: string;
  feature_image: string;
  visibility: string;
  published_at: string;
  updated_at: string;
  html: string;
  reading_time: number;
  meta_description: string;
}

interface ProjectsData {
  posts: Project[];
}

export default function Projects() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        const response = await fetch("/api/fetchAllProjects");
        if (!response.ok) {
          console.error(`Failed to fetch projects: ${response.statusText}`);
          return [];
        }
        const projectsData = (await response.json()) as ProjectsData;
        if (!projectsData || !projectsData.posts) {
          console.error("Invalid projects data");
          return;
        }
        setProjects(projectsData.posts);

        setTimeout(() => {
          setIsVisible(true);
        }, 250); // Delay to start the animation after Hero
      } catch (error) {
        console.error("Failed to fetch projects:", error);
      }
    };
    fetchProjects();
  }, []);

  const numberOfProjects = projects.length;
  return (
    <section
      id="projects"
      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
    >
      <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
        {projects.map((project, index) => (
          <Link
            key={project.id}
            href={{
              pathname: `/projects/${project.slug}`,
              query: { project: JSON.stringify(project) },
            }}
            className="cursor-pointer"
          >
            <div
              className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <h3 className="text-2xl font-bold text-gray-800">
                {project.title}
              </h3>
              <p className="mt-2 text-gray-500">{project.meta_description}</p>
            </div>
          </Link>
        ))}
        <div
          className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
          style={{ animationDelay: `${(numberOfProjects + 1) * 0.1}s` }}
        >
          <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
          <p className="mt-2 text-gray-500">...</p>
        </div>
      </div>
    </section>
  );
}