<script lang="ts" setup>
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { Tooltip } from 'ant-design-vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { UserDropDownItemEnum } from './user-dropdown/config';
  import { useI18n } from '/@/hooks/web/useI18n';

  const handleJump = () => {
    open('https://docs.thingskit.com');
  };

  const { hasPermission } = usePermission();
  const { t } = useI18n();
</script>

<template>
  <Tooltip :title="t('layout.header.helpDoc')">
    <QuestionCircleOutlined
      v-if="hasPermission(UserDropDownItemEnum.ABOUT_SOFTWARE)"
      class="text-base cursor-pointer"
      @click="handleJump"
    />
  </Tooltip>
</template>