<script setup>

import { computed } from 'vue';
import Checkbox from './Checkbox.vue';
import Icon from './Icon.vue';

const emit = defineEmits(['activated']);

const props = defineProps({
  icon: String,
  item: {
    type: Object,
    default: () => ({
      label: '',
      icon: '',
      href: '',
      target: null,
      disabled: false,
      visible: true,
    }),
  },
  hasIcons: Boolean,
});

const isVisible = computed(() => {
  const visible = props.item.visible;
  return typeof visible === 'function' ? visible() : visible ?? true;
});

const isDisabled = computed(() => {
  const disabled = props.item.disabled;
  return typeof disabled === 'function' ? disabled() : disabled ?? false;
});

function onActivated() {
  if (isDisabled.value) return;
  emit('activated');
}

</script>

<template>
  <a class="pankow-menu-item" style="display: block" :href="isDisabled ? null : item.href" :target="item.target || null" @click="onActivated" :class="{ 'pankow-menu-item-disabled': isDisabled }" v-if="isVisible">
    <span :style="{ width: hasIcons ? '29px' : 0 }" style="display: inline-block;"><Icon v-show="hasIcons" :icon="item.icon" /></span>{{ item.label }}
  </a>
</template>

<style>

/* using MenuItem styles */

</style>
