import React from "react";

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

  return (
    <>
        {/* MENU MOBILE */}
        <ul className="menu menu-horizontal p-0">
            {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="20"
                        height="20"
                        viewBox="0 0 24 24"
                        >
                        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                        </svg>
                    )}
                    </a>
                    {item.subMenu && (
                    <ul className="p-2 z-50 bg-slate-200">
                        {item.subMenu.map((itemsm: any, idx: number) => {
                        return (
                            <li key={idx}>
                            <a className="text-neutral-content hover:bg-submenu active:bg-allsubmenu z-50">
                                {itemsm.title}
                            </a>
                            </li>
                        );
                        })}
                    </ul>
                    )}
                </li>
                );
            })}
        </ul>
        {/* END MENU MOBILE */}
    </>
  );
};

export default Menu;