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

const Specialties = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
  const { colormode } = useTheme();
  const { language } = useLang();
  return (
    <div
      className={`specialties container animate__animated ${animation} ${colormode}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <p className="specialtyText">
        {`${
          language === "en-GB"
            ? "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."
            : "Ich liebe es, funktionale und einfach zu bedienende Webanwendungen zu erstellen. Meine bevorzugten Tools sind React, Node.js und TypeScript, und ich arbeite gerne sowohl am Frontend als auch am Backend. Ich konzentriere mich auf saubere, praktische Lösungen, die in der realen Welt funktionieren, und gehe jedes Projekt mit Neugier und Liebe zum Detail an."
        }`}
      </p>
    </div>
  );
};

export default Specialties;
