<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  height: { type: String, default: 'default' }, // 'default' | 'compact'
  position: { type: String, default: 'default' }, // 'default' | 'dynamic'
  positionPoint: { type: String, default: 'lg' },
  class: { type: String, default: '' },
})

const breakpoints = ['','sm','md','lg','xl','2xl']
const getBreakpointIdx = (point: string) => {
  return Math.max(0, breakpoints.findIndex(bp => bp === point))
}

const settingClass = computed(() => {
  let cls = 'label'
  cls += props.height === 'compact' ? ' height-compact ' : ' height-default '
  if (props.position === 'dynamic') {
    cls += ' ' + [
      'text-end pe-2.5',
      'sm:text-end pe-2.5',
      'md:text-end pe-2.5',
      'lg:text-end pe-2.5',
      'xl:text-end pe-2.5',
      '2xl:text-end pe-2.5',
    ][getBreakpointIdx(props.positionPoint)]
  }
  return cls + ' ' + (props.class?.trim() || '')
})
</script>

<template>
  <div :class="settingClass">
    <label v-bind="$attrs">
      <slot />
    </label>
  </div>
</template>
