<script setup lang="ts">
import { useTypography } from '../composables/useTypography'

const props = defineProps<{
  class?: string
  ux?: any
  icons: string[]
  textProps: any
}>()

const sizing = computed(
  () => useTypography({ type: props.textProps.visual ?? props.textProps.as }).value
)

const classes = useStyling(
  'textIcons',
  {
    slots: {
      base: 'flex flex-row',
      icons: 'h-[1lh] inline-flex items-center',
      icon: 'h-[95%] block',
    },
  },
  props
)
</script>

<template>
  <div :class="[classes.base, sizing.base]">
    <div :class="classes.icons">
      <Icon :class="classes.icon" :name="icon" v-for="icon in props.icons" />
    </div>

    <XText v-bind="props.textProps" />
  </div>
</template>
