import React from "react";
import "../../../css/ProjectCard.css";
import GitHubIcon from "../../../assets/icons/socials/square-github.svg?react";
import GlobeIcon from "../../../assets/icons/socials/globe.svg?react";
import { useTheme } from "../../../Context/ThemeContext";

const ProjectCard = ({ project }) => {
  const { colormode } = useTheme();

  return (
    <div className={`projectCard ${colormode}`}>
      <div className={project.imgs.length > 1 ? "imgs" : "img"}>
        {project.imgs.map((img, index) => (
          <img
            key={index}
            src={img}
            alt={`${project.name} screenshot ${index + 1}`}
            style={
              project.imgs.length > 1
                ? { width: `${100 / project.imgs.length}%` }
                : {}
            }
          />
        ))}
      </div>

      <div className="projectInfo">
        <h3>
          {project.name} <span>({project.year})</span>
        </h3>
        <p className="projectJob">{project.job}</p>
        <div className="projectLinks">
          {Object.entries(project.urls).map(([key, value]) => {
            // Determine the correct icon to render based on the key
            const Icon = key === "ghUrl" ? GitHubIcon : GlobeIcon;

            return (
              <a
                key={key}
                className="socialIconAnchor"
                target="_blank"
                rel="noopener noreferrer"
                href={value}
              >
                <Icon className="socialIcon" />
              </a>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default ProjectCard;
