// app/components/Projects.tsx
"use client";

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

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

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

    useEffect(() => {
        const fetchProjects = async () => {
            try {
                const response = await fetch('/api/projects');
                const projectsData = await response.json();
                setProjects(projectsData);
            } catch (error) {
                console.error("Failed to fetch projects:", error);
            }
        };

        fetchProjects();
    }, []);

    return (
        <section id="projects" className="p-10">
            <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) => (
                    <Link
                        key={project.id}
                        href={`/Projects/${project.slug}`}
                        className="cursor-pointer"
                    >
                        <div
                            key={project.id}
                            className="p-4 border shadow-lg bg-white/45 rounded-2xl"
                        >
                            <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>
        </section>
    );
}