import { Link } from "@onegeo/gatsby-theme-onegeo"
import React from "react"

interface Imenu {
    className?: string
}
const Menu = (props: Imenu) => {
    const { className } = props
    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 ${className}`}>
                {menu.map((item: any, key: number) => {
                    return (
                        <li key={key}>
                            <Link to="#">
                                {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>
                                )}
                            </Link>
                            {item.subMenu && (
                                <ul className="p-2 z-50 bg-slate-200">
                                    {item.subMenu.map(
                                        (itemsm: any, idx: number) => {
                                            return (
                                                <li key={idx}>
                                                    <Link to="#" activeClassName="text-neutral-content hover:bg-submenu active:bg-allsubmenu z-50">
                                                        {itemsm.title}
                                                    </Link>
                                                </li>
                                            )
                                        }
                                    )}
                                </ul>
                            )}
                        </li>
                    )
                })}
            </ul>
            {/* END MENU MOBILE */}
        </>
    )
}

export default Menu