import React from "react";
import "../../css/Home.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 "animate.css";
import { useState } from "react";
import "../../css/GridContainer.css";
import ContactTile from "../subComponents/Contact/ContactTile";

const Contact = () => {
  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 contact">
      <LangSelect />
      <Mail />
      <Switch />
      <Navigation
      /*  initialAnimation="animate__bounceInDown"
        onMouseEnter={handleMouseEnter}
        onAnimationEnd={handleAnimationEnd} */
      />
      <ContactTile
        initialAnimation="animate__bounceInDown"
        onMouseEnter={handleMouseEnter}
        onAnimationEnd={handleAnimationEnd}
      />
      <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>
      <Location />
    </div>
  );
};

export default Contact;
