<script setup>
import { reactiveOmit } from "@vueuse/core";
import { Label } from "reka-ui";
import { cn } from "../../../utils/cn";
import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
defineOptions({ name: "UiLabel" });
const props = defineProps({
  for: { type: String, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
defineSlots();
const delegatedProps = reactiveOmit(props, "class");
</script>

<template>
  <Label
    data-slot="label"
    v-bind="delegatedProps"
    :class="
  cn(
    'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed text-zinc-700 peer-disabled:opacity-50',
    props.class
  )
"
  >
    <Tooltip
      v-if="$slots.tooltip"
      :delay-duration="180"
    >
      <TooltipTrigger as-child>
        <span
          data-slot="label-tooltip"
          class="decoration-dashed underline decoration-(--primary) underline-offset-4 cursor-help pointer-events-auto"
        >
          <slot />
        </span>
      </TooltipTrigger>
      <TooltipContent
        align="center"
        side="top"
        class="max-w-xs"
      >
        <slot name="tooltip" />
      </TooltipContent>
    </Tooltip>
    <slot v-else />
  </Label>
</template>
