<script setup lang="ts">
import { type Type, type Color, useTypography } from '../composables/useTypography'
import { ULink } from '#components'

const props = withDefaults(
  defineProps<{
    class?: string
    ux?: any
    as: Type
    visual?: Type
    color?: Color
    text?: string
    margin?: boolean
    linkProps?: any
  }>(),
  { margin: true }
)

const additionalProps = computed(() => (props.as === 'link' ? props.linkProps : undefined))

const tags: Record<string, string> = {
  page: 'h1',
  section: 'h2',
  heading: 'h3',
  subheading: 'h4',
  paragraph: 'p',
  label: 'p',
  detail: 'p',
  hint: 'p',
  link: ULink,
}

const config = computed(() => ({
  tag: tags[props.as],
  classes: useTypography({
    class: props.class,
    ux: props.ux,
    type: props.visual ?? props.as,
    color: props.color,
    margin: props.margin,
  }).value,
}))
</script>

<template>
  <component :is="config.tag" :class="config.classes.base" v-bind="additionalProps">
    <slot v-if="$slots.default" />
    <template v-else-if="props.text">
      {{ props.text }}
    </template>
  </component>
</template>
