import s from './styles.module.scss';
import Image from 'next/image';
import Link from 'next/link';
import { Icons } from '@shared/ui/icon';
import { baseMenu } from '@shared/const/menu';
import { TMenu } from '@shared/types/menu';
import dtrLogo from '@public/images/dtr-logo-eagle.png';
import { BeautyButton } from '@/entities';

function BaseMenu() {
  const phone = '+7 (900) 241-34-34';

  const Menu = ({ list }: { list: TMenu }) => {
    const nodeList = (list: TMenu) => {
      return list.map((item, index) => {
        if (item.children && item.children.length) {
          return (
            <li key={index} className={s.Parent}>
              <div className={s.Row}>
                {item.name}
                <Icons.MenuArrow className={s.Expand} />
              </div>
              <ul className={s.Child}>{nodeList(item.children)}</ul>
            </li>
          );
        }

        return (
          <li key={index}>
            <Link href={item.link!}>{item.name}</Link>
          </li>
        );
      });
    };
    return (
      <nav className={s.Nav}>
        <ul className={s.Menu}>{nodeList(list)}</ul>
      </nav>
    );
  };

  return (
    <section className={s.ContainerNavbar}>
      <div className={s.Navbar}>
        <Image src={dtrLogo} alt={'ДиТрасо'} quality={75} priority />
        <Menu list={baseMenu} />
        <div className={s.Invite}>
          <BeautyButton>{phone}</BeautyButton>
        </div>
      </div>
    </section>
  );
}

export { BaseMenu };