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

interface Project {
    id: string;
    title: string;
    description: string;
    slug: string;
}

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

    useEffect(() => {
        const fetchProjects = async () => {
            try {
                const response = await fetch('/api/projects');
                try {
                    if (!response.ok) {
                        throw new Error("Failed to fetch projects");
                    }
                } catch (error) {
                    console.error("Failed to fetch projects:", error);
                }
                const projectsData = await response.json();
                setProjects(projectsData);
                setTimeout(() => {
                    setIsVisible(true);
                }, 250); // Delay to start the animation after Hero
            } catch (error) {
                console.error("Failed to fetch projects:", error);
            }
        };
        fetchProjects().then(r => r);
    }, []);
    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={`/Projects/${project.slug}`} 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.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>
    );
}