<script setup lang="ts">
import { isEmpty } from "@/utils/lodash";
import { nanoid } from "nanoid"
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
import { buildTree } from "@/utils/recusive";

const _props = defineProps<{
  content?: any;
  component?: any;
}>();
</script>

<template>
  <div class="px-4 mt-4">
    <div class="nav-container">
      <template v-if="_props.content">
        <div v-for="item, index in buildTree(_props.content)" :key="index" class="nav-items-box">
          <div class="submenu-container">
            <h4 class="" >{{ item.title }}</h4>
            <div class="ml-2">
              <h5 
                v-for="_item, _index in item.childs ? item.childs : []" 
                :key="_index"
              >
                {{ _item.title }}
              </h5>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.empty {
  width: 100px;
  height: 30px;
  border-radius: 4px;
  background: #409eff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 18px;
  color: white;
  cursor: pointer;
}

.nav-container {
  display: flex;
  .nav-items-box {
    width: 20%;
  }
}

.submenu-container {
  > div {
    margin-left: 10px;
  }
  h4 {
    font-size: 12px;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
  }
  h5 {
    font-size: 12px;
    font-weight: 400;
    color: white;
    margin-bottom: 5px;
  }
}
</style>
