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

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

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

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

    useEffect(() => {
        fetch("/data/projects.json")
            .then((res) => res.json())
            .then((data) => setProjects(data));
    }, []);

    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.title.toLowerCase().replace(" ", "-")}`}
                        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>
    );
}
