<script lang="ts" setup>
  import { Icon } from '/@/components/Icon';
  import { computed, ExtractPropTypes, unref } from 'vue';
  import { usePermission } from '/@/hooks/web/usePermission';

  interface AuthIconProps extends /* @vue-ignore */ ExtractPropTypes<typeof Icon> {
    auth?: string;
    disabled?: boolean;
  }

  const props = defineProps<AuthIconProps>();

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

  const { hasPermission } = usePermission();

  const getHasPermission = computed(() => {
    const { auth, disabled } = props;
    return disabled ? false : auth ? hasPermission(auth) : true;
  });

  const getBindProps = computed(() => {
    return {
      ...props,
      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
    };
  });
</script>

<template>
  <Icon
    v-bind="getBindProps"
    class="justify-center items-center"
    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200 !dark:text-gray-700'"
  />
</template>