<template>
  <ul class="list-group">
    <v-list-item
      v-for="item of items"
      :key="item.key"
      :item="item"
      :clickable="item.clickable"
      :disabled="disabled || item.disabled"
      @click="onItemSelected(item)"
    >
      <slot name="item" v-bind="item"></slot>
    </v-list-item>
  </ul>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import { ListItem } from '@/types/custom-types';
import VListItem from './list-item.vue';

const props = defineProps({
  items: {
    type: Array as PropType<ListItem[]>,
    default: () => [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['item-selected']);

const onItemSelected = (item: any) => {
  if (!props.disabled) {
    emit('item-selected', item);
  }
};
</script>
