body

import { Flex, ListItem, UnorderedList } from '@chakra-ui/react';
import React from 'react'
import './NavItem.css'
import { Link } from 'react-router-dom';
import { MdKeyboardArrowDown } from 'react-icons/md';

const NavItem = ({menuItems=[]}) => {
  return (
    <Flex className='topbarLists'>
    {
        menuItems?.length > 0 &&  (
          <UnorderedList className='menuHeadings' m={'0'} display={'flex'} gap={'1rem'}>
            {
              menuItems?.map((menus, mi_index) => {
                return <ListItem key={mi_index}>
                    <Flex alignItems={'center'}>
                    <Link className={'menuHeadingsLink'} to={menus.url}>
                    <Flex alignItems={'center'} gap={'0.2rem'} fontSize={{base:'0.9rem',lg:'1rem'}} fontWeight={500}>{menus.title} <MdKeyboardArrowDown />
                    </Flex>
                    </Link>
                    </Flex>
                  <UnorderedList zIndex={2} bg={'white'} pos={'relative'}>
                    {
                      menus?.submenus?.map((submenuData, su_index) => {
                        return (
                          <React.Fragment key={su_index}>
                            <ListItem key={su_index}>
                                <Flex alignItems={'center'}>
                                <Link className={'subMenuLink'} to={submenuData.url}>
                                    <Flex w={'full'}>
                                    {submenuData.title}
                                    </Flex>
                                    </Link>
                                </Flex>
                              </ListItem>
                          </React.Fragment>
                        )
                      })
                    }
                  </UnorderedList>
                </ListItem>
})
            }
          </UnorderedList>
        )
      }
    </Flex>
  )
}

export default NavItem