// 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 bg-gray-100 dark:bg-gray-800">
      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
        Projects
      </h2>
      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
        {projects.map((project) => (
          <div
            key={project.id}
            className="p-4 border rounded shadow-lg bg-white dark:bg-gray-700"
          >
            <h3 className="text-2xl font-bold text-gray-800 dark:text-white">
              {project.title}
            </h3>
            <p className="mt-2 text-gray-600 dark:text-gray-300">
              {project.description}
            </p>
            <Link
              href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
              className="mt-4 inline-block text-blue-500 hover:underline"
            >
              View Project
            </Link>
          </div>
        ))}
      </div>
    </section>
  );
}