import "./style.css"

import { createElement, Menu, X } from 'lucide';

export default function dropdownMenu(...elements) {
    const dropdownMenuHTML = document.createElement("div");
    dropdownMenuHTML.classList.add('menu');

    const btn = document.createElement("button");
    btn.setAttribute("type", "button");
    btn.classList.add("btn-menu");
    const menuIcon = createElement(Menu);
    btn.append(menuIcon);
    dropdownMenuHTML.append(btn);

    const menuDropdownElement = document.createElement("div");
    menuDropdownElement.classList.add("menu-fullscreen", "hidden")

    const ul = document.createElement("ul");
    elements.forEach(element => {
        let li = document.createElement("li");
        li.textContent = element;
        ul.append(li);
    });
    menuDropdownElement.append(ul);
    

    const closeBtn = document.createElement("button");
    closeBtn.setAttribute("type", "button");
    closeBtn.classList.add("btn-menu", "close-btn-menu");
    const closeIcon = createElement(X);
    closeBtn.append(closeIcon);
    menuDropdownElement.append(closeBtn);

    dropdownMenuHTML.append(menuDropdownElement);
    btn.addEventListener("click", () => menuDropdownElement.classList.toggle('hidden'))
    closeBtn.addEventListener("click", () => menuDropdownElement.classList.toggle('hidden'))

    return dropdownMenuHTML;
}