import React from "react";
import "../../../css/ProjectsMain.css";
import { useState } from "react";
import ProjectCard from "./ProjectCard";

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

  return (
    <div
      className={`projectsMain container animate__animated ${animation}`}
      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <h2>Some of my latest projects:</h2>
      <div className="projectsDiv">
          {projects.map((project) => (
            <ProjectCard key={project.id} project={project} />
          ))}
      </div>
    </div>
  );
};

export default ProjectsMain;
