import React from "react";

const MenuMobile = () => {
  const menu = [
    {
      title: "Decouvrir",
    },
    {
      title: "Actualités",
    },
    {
      title: "A propos",
    },
    {
      title: "Mentions légales",
    },
    {
      title: "Parents",
      subMenu: [
        {
          title: "sousmenu1",
        },
        {
          title: "sousmenu2",
        },
      ],
    },
  ];

  return (
    <>
      {/* MENU CLASSIQUE */}
      <ul
        tabIndex={0}
        className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 z-50"
      >
        {menu.map((item: any, key: number) => {
          return (
            <li key={key}>
              <a>
                {item.title}
                {item.subMenu && (
                  <svg
                    className="fill-current"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                  >
                    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
                  </svg>
                )}
              </a>
              {item.subMenu && (
                <ul className="p-2 z-10">
                  {item.subMenu.map((itemsm: any, idx: number) => {
                    return (
                      <li key={idx}>
                        <a>{itemsm.title}</a>
                      </li>
                    );
                  })}
                </ul>
              )}
            </li>
          );
        })}
      </ul>
      {/* END MENU CLASSIQUE */}
    </>
  );
};

export default MenuMobile;