<script setup lang="ts">
import { UiTooltip } from '@/components/UiTooltip';
import { UiButton } from '@/components/UiButton';
import { UiIcon } from '@/components/UiIcon';
import type { UiFieldLabelInfoProps } from './types';

defineOptions({
  name: 'UiFieldLabelInfo',
});

const props = withDefaults(defineProps<UiFieldLabelInfoProps>(), {
  icon: 'circle-help',
});
</script>

<template>
  <UiTooltip :content="props.description">
    <UiButton variant="ghost" size="icon-sm" :aria-label="props.description">
      <UiIcon
        :name="props.icon"
        :size="14"
        class="text-content-on-surface-primary"
      />
    </UiButton>
  </UiTooltip>
</template>
