import React from "react";
import "../../css/Home.css";
import "animate.css";
import "../../css/GridContainer.css";
import LangSelect from "../LangSelect";
import Mail from "../Mail";
import Switch from "../Switch";
import Navigation from "../Navigation";
import LinkedInIcon from "../../assets/icons/socials/linkedin.svg?react";
import GitHubIcon from "../../assets/icons/socials/square-github.svg?react";
import Location from "../Location";
import { useState } from "react";
import ProjectsMain from "../subComponents/Projects/ProjectsMain";
import inkspireImg from "../../assets/img/projects/inkspire.png";
import debImg from "../../assets/img/projects/deb.png";
import animeDBImg from "../../assets/img/projects/animeDB.png";
import animedbImg1 from "../../assets/img/projects/animedb1.png";
import animedbImg2 from "../../assets/img/projects/animedb2.png";
import animedbImg3 from "../../assets/img/projects/animedb3.png";
import strogasoImg from "../../assets/img/projects/strogaso.png";
import { useLang } from "../../Context/LangContext";

const Projects = () => {
const {language} = useLang()

  const projectArr = [
    {
      name: "inkspire.",
      urls: { ghUrl: "https://github.com/yousifpa98/inkspire" },
      year: "2024",
      job: language === "en-GB" ? "freelance" : "freiberuflich",
      imgs: [inkspireImg], 
      id: 1,
    },
    {
      name: "Client Website",
      urls: {
        ghUrl: "N/A",
        liveUrl: "https://druckerei-eberwein.de/",
      },
      year: "2024",
      job: language === "en-GB" ? "freelance" : "freiberuflich",
      imgs: [debImg],
      id: 2,
    },
    {
      name: "Otaku Critics",
      urls: {
        ghUrl: "https://github.com/yousifpa98/animeDB-react",
        liveUrl: "https://otakucritics.netlify.app/",
      },
      year: "2024",
      job: language === "en-GB" ? "personal project" : "pers. Projekt",
      imgs: [animeDBImg],
      id: 3,
    },
    {
      name: "Strogaso",
      urls: {
        ghUrl: "https://github.com/yousifpa98/strogaso-react",
        liveUrl: "https://www.strogaso.de",
      },
      year: "2023/24",
      job: "Salescape",
      imgs: [strogasoImg],
      id: 4,
    },
  ];

  const social = (url) => () => {
    window.open(url, "_blank", "noopener,noreferrer");
  };
  const [hoverAnimation, setHoverAnimation] = useState("animate__headShake");

  const handleMouseEnter = (setAnimation) => {
    setAnimation(hoverAnimation); // Trigger hover animation
  };

  const handleAnimationEnd = (setAnimation) => {
    setAnimation(""); // Clear animation to prevent re-triggering
  };
  
  return (
    <div className="gridContainer">
      <Navigation />
      <Location />
      <div
        className="linkedIn container"
        onClick={social("https://www.linkedin.com/in/yousifpaulus/")}
      >
        <LinkedInIcon className="linkedInIcon" />
      </div>
      <div
        className="github container"
        onClick={social("https://github.com/yousifpa98")}
      >
        <GitHubIcon className="githubIcon" />
      </div>
      <Switch />
      <Mail />
      <LangSelect />
      <ProjectsMain
        projects={projectArr}
        initialAnimation="animate__bounceInDown"
        onMouseEnter={handleMouseEnter}
        onAnimationEnd={handleAnimationEnd}
      />
    </div>
  );
};

export default Projects;