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',
        },
    ];
    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;