<script setup lang="ts">
import type { HTMLAttributes } from 'vue';
import type { ItemActionVariants } from '.';
import { computed } from 'vue';
import { UiTooltip } from '@/components/UiTooltip';
import { cn } from '@/lib/utils';
import { itemActionVariants } from '.';

const props = defineProps<{
  class?: HTMLAttributes['class'];
  variant?: ItemActionVariants['variant'];
  tooltip?: string;
}>();

const actionClass = computed(() =>
  cn(itemActionVariants({ variant: props.variant }), props.class),
);
</script>

<template>
  <UiTooltip v-if="props.tooltip" :content="props.tooltip" side="right">
    <div data-slot="item-action" :class="actionClass">
      <slot />
    </div>
  </UiTooltip>

  <div v-else data-slot="item-action" :class="actionClass">
    <slot />
  </div>
</template>
