<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    size?: 'default' | 'narrow' | 'wide'
    height?: 'default' | 'compact'
    position?: 'default' | 'dynamic'
    class?: string
  }>(),
  {
    size: 'default',
    height: 'default',
    position: 'default',
    class: '',
  },
)

const classVal = computed(() => {
  let val = ''

  if (props.size === 'narrow') val += 'size-narrow '
  else if (props.size === 'wide') val += 'size-wide '
  else val += 'size-default '

  if (props.height === 'compact') val += 'height-compact '
  else val += 'height-default '

  if (props.position === 'dynamic') val += 'position-dynamic '
  else val += 'position-default '

  return (val + (props.class || '')).trim()
})
</script>

<template>
  <div class="label" :class="classVal">
    <label>
      <slot />
    </label>
  </div>
</template>

<style scoped>
.label {
  @apply block flex-shrink-0 shrink-0;
}

.size-default {
  @apply w-28 2xl:w-36;
}
.size-narrow {
  @apply w-24 2xl:w-28;
}
.size-wide {
  @apply w-44 2xl:w-48;
}

.height-default {
  @apply pt-2 2xl:pt-2.5;
}

.height-compact {
  line-height: 14pt;
}

.position-default {
  @apply pe-2 text-start;
}

.position-dynamic > * {
  @apply block pe-2.5 md:text-end;
}
</style>
