2

import React, {useState} from 'react'
import { Link } from "react-router-dom";
import {SecItems} from "./NavLinks"

const MenuItems = () => {
  const [heading, setHeading] = useState("");
  const [subHeading, setSubHeading] = useState("");
  return (
    <>
      {SecItems.map((item) => (
        <div>
          <div>
            <h1
              onClick={() => {
                heading !== item.name ? setHeading(item.name) : setHeading("");
                setSubHeading("");
              }}
            >
              {item.name}
              <span>
                <ion-icon
                  name={`${
                    heading === item.name ? "chevron-up" : "chevron-down"
                  }`}
                ></ion-icon>
              </span>
              <span>
                <ion-icon name="chevron-down"></ion-icon>
              </span>
            </h1>
            {SecItems.submenu && (
              <div>
                <div>
                  <div>
                    {SecItems.sublinks.map((mysublinks) => (
                      <div>
                        <h1>
                          {mysublinks.Head}
                        </h1>
                        {mysublinks.sublink.map((slink) => (
                          <li>
                            <Link
                              to={slink.link}
                            >
                              {slink.name}
                            </Link>
                          </li>
                        ))}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
          {/* Mobile menus */}
          <div
            className={`
            ${heading === item.name ? "md:hidden" : "hidden"}
          `}
          >
            {/* sublinks */}
            {item.sublinks.map((slinks) => (
              <div>
                <div>
                  <h1
                    onClick={() =>
                      subHeading !== slinks.Head
                        ? setSubHeading(slinks.Head)
                        : setSubHeading("")
                    }
                  >
                    {slinks.Head}

                    <span className="text-xl md:mt-1 md:ml-2 inline">
                      <ion-icon
                        name={`${
                          subHeading === slinks.Head
                            ? "chevron-up"
                            : "chevron-down"
                        }`}
                      ></ion-icon>
                    </span>
                  </h1>
                  <div

                  >
                    {slinks.sublink.map((slink) => (
                      <li>
                        <Link to={slink.link}>{slink.name}</Link>
                      </li>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </>
  );
};

export default MenuItems;