/* ----- 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="projectArticleContainer">
      <section className="projectTypeSelectionContainer">
          <div className={typeProject === "web" ? "projectTypeSelection projectTypeSelected projectSelectedOne" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("web")}}>Web Dev</div>
          <div className={typeProject === "cpp" ? "projectTypeSelection projectTypeSelected projectSelectedTwo" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("cpp")}}>C++</div>
          <div className={typeProject === "mod" ? "projectTypeSelection projectTypeSelected projectSelectedThree" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("mod")}}>Game Mods</div>
      </section>
      {typeProject === "web" && <WebProjects />}
      {typeProject === "cpp" && <CppProjects />}
      {typeProject === "mod" && <ModProjects />}
    </article>
  );
};

export default Projects;

