import React, { useState } from "react";
import "../css/Hero.css";
import "animate.css";
import { useTheme } from "../Context/ThemeContext";
import { useLang } from "../Context/LangContext";

const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
  const { colormode } = useTheme();
  const { language } = useLang();
  return (
    <div
      className={`hero container animate__animated ${animation} ${colormode}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <p>
        <span>
          {language === "en-GB" ? "Hi, I'm Yousif. 👋🏽" : "Hi, ich bin Yousif. 👋🏽"}{" "}
          <br />
        </span>{" "}
        {language === "en-GB"
          ? "I'm a Full-Stack Developer from"
          : "Ich bin ein Full-Stack Entwickler aus"}{" "}
        <br />
        <span>{language === "en-GB" ? "Germany" : "Köln"}</span>.
      </p>
    </div>
  );
};

export default Hero;
