import React, { useState } from "react";
import "../css/Hero.css";
import "animate.css";

const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);

  return (
    <div
      className={`hero container animate__animated ${animation}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <p>
        <span>
          Hi, I'm Yousif. <br />
        </span>{" "}
        I'm a Full-Stack Developer from <span>Germany</span>.
      </p>
    </div>
  );
};

export default Hero;