/* ----- Project Imports ----- */
import "@/styles/projects.css";
import "@/components/WebProjects";
import "@/components/CppProjects";
import WebProjects from "@/components/WebProjects";
import CppProjects from "@/components/CppProjects";
import ModProjects from "@/components/ModProjects";
import { useProjectContext } from "@/context/ProjectContext";


function Projects() {
  const { typeProject, setTypeProject } = useProjectContext();

  function handleClicks(arg) {
    setTypeProject(arg);
  }

  return (
    <article id="projects" className="projectsContainer">
      <section className="projectsTitlesContainer">
        <h2>Projects</h2>
        <div className="projectSelectionButtonsContainer">
          <button type="button" onClick={() => { handleClicks("web")}}>Web Dev</button>
          <button type="button" onClick={() => { handleClicks("cpp")}}>C++</button>
          <button type="button" onClick={() => { handleClicks("mod")}}>Game Mods</button>
        </div>
      </section>
      {typeProject === "web" && <WebProjects />}
      {typeProject === "cpp" && <CppProjects />}
      {typeProject === "mod" && <ModProjects />}
    </article>
  );
};

export default Projects;