<script lang="ts" setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import LocaleSwitcher from "./LocaleSwitcher.vue";
const { t } = useI18n({ useScope: 'global' })

const items = computed(() => [
  {
    label: t("createCalendar"),
    icon: "pi pi-fw pi-plus",
    to: "/",
  },
  {
    label: t("editCalendar"),
    icon: "pi pi-fw pi-pencil",
    to: "/edit",
  },
  {
    label: t("roomFinder"),
    icon: "pi pi-fw pi-calendar",
    to: `rooms`,
  },
  {
    label: t("faq"),
    icon: "pi pi-fw pi-book",
    to: `faq`,
  },
  {
    label: t("imprint"),
    icon: "pi pi-fw pi-id-card",
    to: `imprint`,
  },
  {
    label: t("privacy"),
    icon: "pi pi-fw pi-exclamation-triangle",
    to: `privacy-policy`,
  },
]);

</script>

<template>
  <Menubar :model="items" class="menubar justify-content-center">
    <template #start>
    </template>
    <template #end>
      <LocaleSwitcher></LocaleSwitcher>
    </template>
  </Menubar>
</template>

<style scoped>
.menubar {
  background-color: transparent;
  border: none;
}
</style>