<script setup lang="ts">
interface Item {
  icon: string
  label: string
  detail?: string
}

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

const classes = useStyling(
  'gridIconLabelDetail',
  {
    slots: {
      base: 'grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]',
      item: 'flex flex-row items-stretch',
      icon: 'shrink-0 w-6 h-6 mt-0.5',
      texts: 'flex flex-col justify-start',
      label: '',
      detail: '',
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <div v-for="(item, index) in props.items" :class="classes.item" :key="index">
      <UIcon :class="classes.icon" :name="item.icon" />

      <div :class="classes.texts">
        <XText :class="classes.label" as="label" :text="item.label" :margin="!!item.detail" />
        <XText
          v-if="item.detail"
          :class="classes.detail"
          as="detail"
          :text="item.detail"
          :margin="false"
        />
      </div>
    </div>
  </div>
</template>
