"use client"
import {FC} from "react";
import YogaImageComponent from "@/components/yoga.image.component";
import clsx from "clsx";
import exp from "node:constants";

export interface MenuItem{
    href?: string;
    label: string;
    children?: MenuItem[];
    active?: boolean
}
export interface Props{
    menuItems: MenuItem[];
}

const Nav: FC<Props> = ({menuItems}:Props) => {



    return (
        <header>
            <div className="main_header">
                <div className="container-fluid">
                    <nav className="navbar navbar-expand-lg navbar-light p-0">
                        <a className="navbar-brand" href="/index">
                            <figure className="mb-0"><YogaImageComponent src="/assets/images/yogastic_logo.png" alt=""/>
                            </figure>
                        </a>
                        <button className="navbar-toggler collapsed" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                            <span className="navbar-toggler-icon"></span>
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav">
                                {menuItems.map( (menuItem,index) => <MenuItemComponent key={"nav"+menuItem.href+"_"+index} menuItem={menuItem} />)}
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </header>
    );
}

interface MenuItemProps{
    menuItem: MenuItem,
    dropdownItem?: boolean,
}
const MenuItemComponent: FC<MenuItemProps>  = ({menuItem, dropdownItem}: MenuItemProps) => {
    if ( !menuItem ){
        return (<></>);
    }
    if ( !menuItem.children || menuItem.children.length == 0 ){
        return (
            // <li className="nav-item active">
            <li className={clsx("nav-item", {"active": menuItem.active})}>
                <a className={clsx("nav-link", {"dropdown-item":dropdownItem})} href={menuItem.href}>{menuItem.label}</a>
            </li>
        );
    }

    return (
        <li className={clsx("nav-item", "dropdown",{"active": menuItem.active})}>
            <a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#"
                role="button" data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false">{menuItem.label}</a>
            <div className="dropdown-menu drop-down-content">
                <ul className="list-unstyled drop-down-pages">
                    {
                        menuItem.children.map((item,index) => <MenuItemComponent key={"child_"+item.href+"_"+index} menuItem={item}  dropdownItem={true}/>)
                    }
                </ul>
            </div>
        </li>
    );
}


export default Nav;