<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="With Icons Using Default Slot">
        <AisMenuItem label="Search" icon="search" href="/search"></AisMenuItem>
        <AisMenuItem label="Save" icon="save" href="/save"></AisMenuItem>
        <AisMenuItem label="Delete" icon="delete" to="/delete"></AisMenuItem>
        <AisMenuItem label="Using a non-core icon" :icon="faApple" to="/apple"></AisMenuItem>
        <AisMenuItem label="Cancel" icon="cancel" @click="handleCancel"></AisMenuItem>
      </AisMenu>
    </div>

    <div>
      <AisMenu label="With Icons Using Items Prop"
               :items="iconItems"
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import { faApple } from "@fortawesome/free-brands-svg-icons";
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add(faApple)

  const iconItems = ref([
    { key: 'search', label: 'Search', icon: 'search', href: '/search' },
    { key: 'save', label: 'Save', icon: 'save', href: '/save' },
    { key: 'delete', label: 'Delete', icon: 'save', to: '/delete' },
    { key: 'apple', label: 'Using a non-core icon', icon: faApple, to: '/apple' },
    { key: 'close', label: 'Close', icon: "cancel" },
  ])

  const handleCancel = (e) => {
    console.log(`handleCancel: ${e}`)
  }
</script>

<script>
export default {
  name: "AisMenuIcons",
}
</script>