import { Logo } from "../../../assets/logos";
import {Account, Clipboard, Cup, Home, Openbook, Users} from "../../../assets/icons/menu";
import MenuItem from "./MenuItem";
import { useAppSelector } from "../../../redux/hooks";

const Menu = () => {
  const menuItems = [
    {text: "Главная", href: "/home", icon: Home, page: "home" },
    {text: "Задачи", href: "/home/missions", icon: Clipboard, page: "missions" },
    {text: "Статьи", href: "/home/articles", icon: Openbook, page: "articles" },
    {text: "Группы", href: "/home/groups", icon: Users, page: "groups" },
    {text: "Контесты", href: "/home/contests", icon: Cup, page: "contests" },
    {text: "Аккаунт", href: "/home/account", icon: Account, page: "account" },
    {text: "Загрузка", href: "/upload", icon: Account, page: "p" },
  ];
  const activePage = useAppSelector((state) => state.store.menu.activePage);

  return (
    <div className="w-[250px] fixed top-0 items-center box-border p-[20px] pt-[35px]">
      <img src={Logo} className="w-[173px]" />
      <div className="">
        {menuItems.map((v, i) => (
          <MenuItem key={i} icon={v.icon} text={v.text} href={v.href} active={v.page == activePage} page={v.page}/>
        ))}
      </div>
    </div>
  );
};

export default Menu;