import React from "react";
import "../../../css/ProjectsMain.css";
import { useState } from "react";
import ProjectCard from "./ProjectCard";
import { useTheme } from "../../../Context/ThemeContext";
import { useLang } from "../../../Context/LangContext";

const ProjectsMain = ({
  initialAnimation,
  onMouseEnter,
  onAnimationEnd,
  projects,
}) => {
  const [animation, setAnimation] = useState(initialAnimation);

  const { colormode } = useTheme();
  const { language } = useLang();

  return (
    <div
      className={`projectsMain container animate__animated ${animation} ${colormode}`}
      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <h2>{`${
        language === "en-GB"
          ? "Some of my latest projects:"
          : "Ein paar meiner letzten Projekte:"
      }`}</h2>
      <div className="projectsDiv">
        {projects.map((project) => (
          <ProjectCard key={project.id} project={project} />
        ))}
      </div>
    </div>
  );
};

export default ProjectsMain;
