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

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

  const { colormode } = useTheme();
  const { language } = useLang();

  return (
    <div
      className={`container tallContentAbout animate__animated ${animation} ${colormode}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <div className="funFacts">
        <h2>{`${
          language === "en-GB"
            ? "Some Fun-Facts about me:"
            : "Ein paar Fun-Facts über mich:"
        }`}</h2>
        <ul className="funFactList">
          <li>
            <p>
              {`${
                language === "en-GB"
                  ? "2300+ Chess.com blitz rating and a lifelong love for strategy."
                  : "2300+ Blitz-Rating auf Chess.com und eine lange Liebe für Strategie"
              }`}
            </p>
          </li>
          <li>
            <p>
              {`${
                language === "en-GB"
                  ? "Big fan of tycoon simulation games—I could spend hours building and managing virtual worlds."
                  : "Großer Fan von Tycoon-Sim Spielen—Ich könnte Stunden damit verbringen, virtuelle Welten zu managen."
              }`}
            </p>
          </li>
          <li>
            <p>
              {`${
                language === "en-GB"
                  ? "I love Asian food, especially Japanese cuisine, and enjoy trying new recipes."
                  : "Ich liebe asiatische Küche, besonders die japanische, und probiere gern neue Rezepte aus."
              }`}
            </p>
          </li>
          <li>
            <p>
              {`${
                language === "en-GB"
                  ? "Football is my passion (and no, I won't call it soccer)."
                  : "Fußball ist eine meiner liebsten Leidenschaften."
              }`}
            </p>
          </li>
          <li>
            <p>
              {`${
                language === "en-GB"
                  ? "I have a guilty pleasure for sitcoms like The Big Bang Theory and can't resist a good Taylor Swift track."
                  : "Ich habe eine Schwäche für Sitcoms wie 'The Big Bang Theory' und kann einem guten Taylor Swift Song nicht wiederstehen."
              }`}
            </p>
          </li>
          {/* <li>
            <p>Hiking is one of my favorite ways to relax and recharge.</p>
          </li> */}
          <li>
            <p>
              {`${
                language === "en-GB"
                  ? "I enjoy baking, especially experimenting with new desserts.."
                  : "Ich backe gern und experimentiere gerne mit neuen Desserts."
              }`}
            </p>
          </li>
          <li>
            <p>
              {`${
                language === "en-GB"
                  ? "I've been drawing and painting since I was young, and it's still one of my favorite creative outlets."
                  : "Ich zeichne und male seit meiner Kindheit - es ist bis heute eines meiner liebsten kreativen Hobbies."
              }`}
            </p>
          </li>
        </ul>
      </div>
      {/*       <p className="persText">
        Outside of tech, I enjoy spending time outdoors, baking, and diving into
        new hobbies. I like to keep things balanced—challenging my mind with
        strategy games or chess and unwinding with great food, music, and some
        classic sitcoms.
      </p> */}
    </div>
  );
};

export default TallContentAbout;
