import React from "react";
import projects from "../components/projectData.jsx";
import git from "../images/icons/git.svg";

function Project() {
  return (
    <section className="my-28 px-5" id="projects">
      <header className="pt-10 text-2xl font-bold">
        <h2>Projects</h2>
      </header>
      <div className="my-7 space-y-24">
        {projects.map((project) => (
          <article
            className="flex flex-wrap md:items-center md:justify-between"
            key={project.id}
          >
            <picture
              className={
                project.id % 2 === 0
                  ? "w-full shadow-lg md:w-6/12 "
                  : "w-full shadow-lg md:order-1 md:w-6/12"
              }
            >
              <img src={project.image} alt={project.title} />
            </picture>
            <div className="mx-1 my-3 flex  w-full flex-col space-y-3 overflow-auto md:w-5/12 ">
              <h3 className="text-lg font-bold uppercase">{project.title}</h3>
              <p>{project.description}</p>
              <div className="flex space-x-3 overflow-auto pb-2 md:flex-wrap">
                {project.tools.map((disc) => (
                  <span
                    className="mt-2 rounded-lg border border-gray-500 px-2 py-1 text-sm"
                    key={disc}
                  >
                    {disc}
                  </span>
                ))}
              </div>
              <div className="relative flex w-auto space-x-5 ">
                {project?.git && (
                  <a href={project.git} target="_blank" rel="noreferrer">
                    <img
                      src={git}
                      alt="link to git page"
                      width="24px"
                      height="24px"
                    />
                  </a>
                )}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

export default Project;
