/* ----- Project Imports ----- */
import "@/styles/projects.css";
import { modProjects } from "@/data/modsdata.js";

function ModProjects() {
  return (
    <section id="modprojects" className="projectInformationContainer">
      {modProjects.map((item, index) => {
        return(
          <div key={item.Name} className="projectIndividualItemContainer">
            <div className="projectImageContainer">
              <img className ="projectImage" src={item.Image} alt={item.Name} />
            </div>
            <div className="projectTextContainer">
            <h3 className="projectTextTitle">{item.Name}</h3>
            <p className="projectTechnologies">{item.Details}</p>
            <div className="projectLinksContainer">
            <a className="individualProjectLinks" href={item.GitHub} target="_blank" >GitHub</a>
            <a className="individualProjectLinks" href={item.Steam} target="_blank" >Steam</a>
            </div>
            </div>
        </div>);
      })}
    </section>
  );
};

export default ModProjects;