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;
                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>
    );
}