import React from "react";

interface IMenu {
    logo?: any
}

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

  return (
    <>
        <div className="navbar-start">
            <div className="dropdown">
                <label tabIndex={0} className="btn btn-ghost lg:hidden">
                    <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M4 6h16M4 12h8m-8 6h16"
                    />
                    </svg>
                </label>

                {/* <MenuMobil /> */}
                <div>
                    <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>
                </div>
            {/* <End MenuMobil /> */}
                <div className="flex-shrink-0 flex items-center">
                    {logo}
                </div>
            </div>
        </div>

        {/* MENU CLASSIQUE */}
        <div className="navbar-center hidden lg:flex">
            <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>
        </div>
        {/* END MENU CLASSIQUE */}
    </>
  );
};

export default Menu;