<template>
  <div class="ais-list-group" :class="[flush ? 'flush' : '']">
    <slot name="default">
      <AisListGroupItem v-for="item in items" :key="item"
                        :label="getLabel(item)"
                        :active="item.active"
                        :disabled="item.disabled"
                        :action="item.action"
                        :href="item.href"
                        :to="item.to"
      >{{ getLabel(item) }}</AisListGroupItem>
    </slot>
  </div>
</template>

<script setup>
  import AisListGroupItem from "@/components/list-group/AisListGroupItem.vue";
  import { computed, provide } from "vue";
  import { classToArray } from "@/util/class-util";
  import {isString} from "@/util/util";

  const props = defineProps({
    items: { type: Array, default: () => [] },
    // /* Styles each list group item */
    // itemClass: { type: [String, Array], default: () => undefined },
    // /* The style to be applied when the list group item is active */
    // activeClass: { type: String, default: () => '' },
    flush: { type: Boolean, default: () => false },
  })

  const getLabel = (item) => { return isString(item) ? item : item.label }

  provide( 'activeClass', computed(() => classToArray(props.activeClass)) )
  provide( 'itemClass', computed(() => props.itemClass) )
</script>

<script>
export default {
  name: "AisListGroup"
}
</script>