import React from "react";
import "../../../css/Specialties.css";
import { useState } from "react";

const Specialties = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
  return (
    <div
      className={`specialties container animate__animated ${animation}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <p className="specialtyText">
        I’m a fullstack developer who loves creating web applications that are
        functional and easy to use. My go-to tools are React, Node.js, and
        TypeScript, and I enjoy working on both the front-end and back-end. I
        focus on clean, practical solutions that work in the real world and
        approach every project with curiosity and attention to detail.
      </p>
    </div>
  );
};

export default Specialties;
