import React, { useEffect, useState } from "react";
import Link from "next/link";
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";

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();
  }, []);

  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">
        <ResponsiveMasonry
                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
                gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}        >
          <Masonry >
            {projects.map((project, index) => (
              <Link
                key={project.id}
                href={{
                  pathname: `/projects/${project.slug}`,
                  query: { project: JSON.stringify(project) },
                }}
                className="cursor-pointer w-full"
              >
                <div
                  className="project-card"
                  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>
            ))}
          </Masonry>
        </ResponsiveMasonry>
      </div>
    </section>
  );
}
