<script setup lang="ts">
import type IVLabel from './IVLabel.type.js';
import styles from '@visua/typography.module.css';
import VHint from '../hint/VHint.vue';

const props = withDefaults(defineProps<IVLabel>(), {
  type: 'default',
  disabled: false,
  required: false,
  hint: undefined,
});
</script>

<template>
  <label
    :for="props.for"
    class="label-container"
    :class="[styles['text-body-MD-standard-text-Regular'], {
      'label': props.type === 'default',
      'success': props.type === 'success',
      'error': props.type === 'error',
      'disabled': props.disabled,
    }]"
    :aria-label="props.label"
    :aria-disabled="props.disabled"
  >
    <span>
    {{ props.label }}
      <template v-if="props.required">
        <span v-if="props.required" :class="{ 'required': !props.disabled}">
          <slot name="required-tip">*</slot>
        </span>
      </template>
    </span>
    <VHint
      v-if="props.hint"
      :title="props.hint"
      :disabled="props.disabled"
    />
  </label>
</template>

<style lang="css" scoped>
*{
  padding: 0px;
  margin: 0px;
}

.label-container{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
}

.label {color: var(--text-label-grey);}
.success {color: var(--text-default-success);}
.error {color: var(--text-default-error);}
.disabled {color: var(--text-disabled-grey);}
.required {
  color: var(--minor-red-marianne);
  display: inline;
}
</style>
