<script lang="ts" setup>

const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  comment: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-lg flex flex-col gap-1">
    <div class="flex items-center gap-1 text-sm">
      <UIcon v-if="icon" :name="icon" class="text-base inline-block"/>
      <div class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden">
        <span>{{ label }}</span>
        <UTooltip v-if="comment" :popper="{ arrow: true, placement: 'top' }" :text="comment">
          <UIcon class="text-base" name="i-tabler-help"/>
        </UTooltip>
      </div>
      <slot name="actions"/>
    </div>
    <div>
      <slot/>
    </div>
  </div>
</template>

<style scoped>

</style>