import React from "react";
import "../css/Navigation.css";
import { useState } from "react";
import AddressCardIcon from "../assets/icons/navIcons/address-card.svg?react";
import CodeIcon from "../assets/icons/navIcons/code.svg?react";
import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react";
import HouseIcon from "../assets/icons/navIcons/house.svg?react";
import SuitcaseIcon from "../assets/icons/navIcons/suitcase.svg?react";
import DownloadIcon from "../assets/icons/navIcons/download.svg?react";
import { NavLink } from "react-router-dom";
import clsx from "clsx";
import { useTheme } from "../Context/ThemeContext";
import { useLang } from "../Context/LangContext";

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

  const { colormode } = useTheme();

  const navItems = [
    { name: { enGB: "Home", deDE: "Start" }, to: "/", icon: HouseIcon, id: 1 },
    {
      name: { enGB: "About", deDE: "Über Mich" },
      to: "/about",
      icon: AddressCardIcon,
      id: 2,
    },
    {
      name: { enGB: "Experience", deDE: "Erfahrung" },
      to: "/workExp",
      icon: SuitcaseIcon,
      id: 3,
    },
    {
      name: { enGB: "Projects", deDE: "Projekte" },
      to: "/projects",
      icon: CodeIcon,
      id: 4,
    },
    {
      name: { enGB: "Contact", deDE: "Kontakt" },
      to: "/contact",
      icon: EnvelopeIcon,
      id: 5,
    },
    {
      name: { enGB: "CV", deDE: "Lebenslauf" },
      to: "",
      icon: DownloadIcon,
      id: 6,
    },
  ];

  const { language } = useLang();
  return (
    <div
      className={`navigation container animate__animated ${animation} ${colormode}`}
      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <ul className="navList">
        {navItems.map((item) => {
          const IconComponent = item.icon;
          return (
            <li className="navItem" key={item.id}>
              <NavLink
                to={item.to}
                className={({ isActive }) =>
                  clsx(
                    "navLink",
                    { active: isActive },
                    item.name.enGB === "CV" && "cv" // Add "cv" class if item.name is "CV"
                  )
                }
              >
                <span>
                  {language === "en-GB" ? item.name.enGB : item.name.deDE}
                </span>{" "}
                <IconComponent className="navIcon" />
              </NavLink>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default Navigation;