<template>
  <div>
    <!-- Menu Overlay -->
    <div
      class="slide-menu-overlay"
      :class="{ open: isOpen }"
      @click="$emit('close')"
    ></div>

    <!-- Slide Menu -->
    <nav class="slide-menu" :class="{ open: isOpen }">
      <!-- Dynamic Menu Sections -->
      <div
        v-for="section in menuItems"
        :key="section.title"
        class="menu-section"
      >
        <h3 class="menu-title">{{ section.title }}</h3>
        <ul class="menu-list">
          <li
            v-for="item in section.items"
            :key="item.to"
            class="menu-item"
          >
            <router-link
              :to="item.to"
              class="menu-link"
              :class="{ active: isRouteActive(item.to) }"
              @click="$emit('close')"
            >
              <i :class="['menu-icon', item.icon]"></i>
              <span>{{ item.label }}</span>
              <span v-if="item.badge" class="menu-badge">{{ item.badge }}</span>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- Profile Section (at bottom) -->
      <div class="menu-section menu-profile">
        <div class="profile-info">
          <i class="pi pi-user"></i>
          <span>{{ currentUser?.username || 'Utilizator' }}</span>
        </div>
        <ul class="menu-list">
          <slot name="profile-items"></slot>
          <li class="menu-item">
            <a href="#" class="menu-link" @click.prevent="handleLogout">
              <i class="menu-icon pi pi-sign-out"></i>
              <span>Deconectare</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
import { useRoute } from "vue-router";

export default {
  name: "SlideMenu",
  props: {
    // Is menu open?
    isOpen: {
      type: Boolean,
      default: false,
    },
    // Menu items configuration
    // Format: [{ title: 'Section', items: [{ to: '/path', icon: 'pi pi-icon', label: 'Label', badge: null }] }]
    menuItems: {
      type: Array,
      default: () => [],
    },
    // Current user object
    currentUser: {
      type: Object,
      default: null,
    },
  },
  emits: ["close", "logout"],
  setup(props, { emit }) {
    const route = useRoute();

    const isRouteActive = (path) => {
      return route.path === path;
    };

    const handleLogout = () => {
      emit("logout");
      emit("close");
    };

    return {
      isRouteActive,
      handleLogout,
    };
  },
};
</script>
