<template>
  <label class="baseInputLabel" v-bind="$attrs" :class="{ 'baseInputLabel--isInvalid': isInvalid }">
    <transition name="scale-elastic">
      <div v-if="isInvalid" class="baseInputLabel__iconWrapper">
        <cp-icon class="baseInputLabel__invalidIcon" type="alert-circle" />
      </div>
    </transition>
    <div class="baseInputLabel__content">
      <slot />
      <span v-if="required" class="u-asterisk"> *</span>
      <cp-tooltip v-if="tooltip" :content="tooltip">
        <button class="baseInputLabel__tooltip" tabindex="-1" type="button">
          <cp-icon class="baseInputLabel__tooltipIcon" type="tooltip" />
        </button>
      </cp-tooltip>
    </div>
  </label>
</template>

<script setup lang="ts">
interface Props {
  isInvalid?: boolean
  required?: boolean
  tooltip?: string
}

withDefaults(defineProps<Props>(), {
  isInvalid: false,
  required: false,
  tooltip: '',
})

defineOptions({
  inheritAttrs: false,
})
</script>

<style lang="scss">
.baseInputLabel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin-bottom: var(--cp-spacing-md);
  color: var(--cp-text-primary);
  font-size: var(--cp-text-size-sm);
  letter-spacing: var(--cp-letter-spacing-sm);
  line-height: var(--cp-line-height-md);

  &::first-letter {
    text-transform: capitalize;
  }

  &__content {
    display: flex;
    align-items: center;
    gap: var(--cp-spacing-sm);
    transition: transform 300ms var(--cp-easing-elastic) 100ms;
  }

  &__tooltip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cp-spacing-sm);
    border-radius: var(--cp-radius-full);
    color: var(--cp-foreground-quaternary);
    outline-offset: calc(var(--cp-dimensions-1) * -0.75);

    &:hover,
    &:focus {
      color: var(--cp-focus);
    }

    &:focus-visible {
      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
    }
  }

  &__tooltipIcon {
    width: var(--cp-dimensions-4);
    height: var(--cp-dimensions-4);
  }

  &__iconWrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cp-spacing-sm);
    margin-right: var(--cp-spacing-sm);

    &.scale-elastic-enter-active {
      transition-delay: 100ms;
    }
  }

  &__invalidIcon {
    width: var(--cp-dimensions-4);
    height: var(--cp-dimensions-4);
    color: var(--cp-foreground-error-primary);
  }

  &--isInvalid .baseInputLabel__content {
    transform: translate3d(calc(var(--cp-dimensions-6) + var(--cp-spacing-sm)), 0, 0);
  }
}
</style>
