<template>
  <GnNavigationShell
    brand="SHSERV WEB CLIENT"
    logo-src=""
    title="Navigation"
    subtitle="Smart Home"
    :items="navItems"
    active-match="prefix"
    :current="pageTitle"
  >
    <template #content>
      <slot />
    </template>
  </GnNavigationShell>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { GnNavigationShell } from "gnexus-ui-kit/vue";

const route = useRoute();

const PAGE_TITLES = {
  "areas-favorites": "Favorites",
  "areas-tree": "Areas",
  "area-detail": "Area",
  devices: "Devices",
  "device-detail": "Device",
  "devices-scanning": "Scanning",
  "scripts-actions": "Actions",
  "scripts-regular": "Regular",
  "scripts-scopes": "Scopes",
  "script-detail": "Script",
};

const pageTitle = computed(() => {
  const name = route?.name;
  if (name && PAGE_TITLES[name]) {
    return PAGE_TITLES[name];
  }
  return "";
});

const navItems = [
  { label: "Favorites", to: "/areas/favorites", icon: "ph-star" },
  { label: "Areas", to: "/areas/tree", icon: "ph-map-trifold" },
  { label: "Devices", to: "/devices", icon: "ph-cpu" },
  { label: "Scanning", to: "/devices/scanning", icon: "ph-magnifying-glass" },
  { label: "Actions", to: "/scripts/actions", icon: "ph-play" },
  { label: "Regular", to: "/scripts/regular", icon: "ph-clock" },
  { label: "Scopes", to: "/scripts/scopes", icon: "ph-brackets-curly" },
];
</script>