<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  tag: string
  type: 'page' | 'section' | 'heading' | 'subheading' | 'paragraph' | 'label' | 'detail' | 'hint'
}>()

const classes = useStyling(
  'textSpacing',
  {
    slots: {
      base: '',
    },
    variants: {
      type: {
        page: { base: 'text-4xl font-bold tracking-tight leading-tight' },
        section: { base: 'text-3xl font-semibold tracking-tight leading-snug' },
        heading: { base: 'text-2xl font-semibold leading-snug' },
        subheading: { base: 'text-xl font-medium leading-snug' },
        paragraph: { base: 'text-lg leading-relaxed' },
        label: { base: 'text-lg font-bold leading-none' },
        detail: { base: 'text-base leading-snug' },
        hint: { base: 'text-base leading-snug' },
      },
    },
  },
  props
)
</script>

<template>
  <component :is="props.tag" :class="classes.base">
    <slot />
  </component>
</template>
