Problem in making the site menu dynamic in WordPress with wp_nav_menu function

Question

I designed an html template for wordpress and I'm having trouble making the menu dynamic. The menu of my site is megamenu type.

              <div class="flex items-center gap-8">
                  <div class="hidden lg:block">
                    <ul class="flex menu lg:menu-horizontal !p-0">
                        <li><a href="index.html">home</a></li>
                        <li><a href="shop.html">shop</a></li>
                        <li><details>
                            <summary><a href="#">mega menu</a></summary>
                            <ul class="menu xl:menu-horizontal lg:min-w-max bg-white rounded-box gap-10 z-10">
                              <li>
                                <a href="order.html">shops</a>
                                <a href="interest-list.html">favorite</a>
                                <a href="download.html">downloads</a>
                                <a href="edit-account.html">account</a>
                                <a href="my-account.html">feed</a>

                              </li>

                              <li>
                                <a href="question.html">questions</a>
                                <a href="single-page.html">blog</a>
                                <a href="cart.html">buy</a>
                                <a href="checkout.html">detail</a>
                                

                              </li>
                              <li>
                                <img class="w-52" src="../assets/images/product-3.jpg" alt="" srcset="">
                              </li>

                            </ul>
                        </details></li>
                       
                        <li><a href="comparison.html">product</a></li>
                        <li><a href="blog.html">bloge</a></li>
                        <li><a href="about-us.html">about us</a></li>
                        <li><a href="about-us.html">contact usا</a></li>
                    </ul>
                  </div>
              </div>

I used this piece of code to make it dynamic, but the style of the menu was completely messed up

<?php wp_nav_menu(
    array(
           'theme_location' => 'main-menu',
        'menu_class'=> 'flex menu lg:menu-horizontal !p-0',
        'container' => ''
         )
        ); 
?>