<script lang="ts" setup>
import type { TreeNodeType } from '#/utils/database-tree/types';

import { computed } from 'vue';

import { $t } from '@vben/locales';

import { ElTag } from 'element-plus';

defineOptions({ name: 'DatabaseTreeNodeLabel' });

const props = defineProps<{
  dbName?: string;
  isSystem?: boolean;
  label: string;
  type: string | TreeNodeType;
}>();

const showSystemTag = computed(
  () =>
    props.type === 'connection' &&
    (props.isSystem === true || props.dbName === 'default'),
);
</script>

<template>
  <div class="flex items-center">
    <span class="text-sm">{{ label }}</span>
    <ElTag v-if="showSystemTag" class="ml-1" size="small" type="warning">
      {{ $t('database-manager.systemDatabase') }}
    </ElTag>
  </div>
</template>
