<template>
  <div class="px-2">
    <v-chip-group v-model="selectedChip">
      <v-chip
        v-for="(item, index) in items"
        :key="index"
        :class="{ 'selected-chip': selectedChip === index }"
        @click="selectChip(index)"
      >
        <v-icon class="mr-2">{{ item.icon }}</v-icon>
        {{ item.name }}
      </v-chip>
    </v-chip-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface ChipItem {
  name: string;
  icon: string;
}

const props = defineProps({
  items: {
    type: Array as () => ChipItem[],
    required: true,
    default: () => []
  }
});

const selectedChip = ref(-1);

const selectChip = (index: number) => {
  selectedChip.value = selectedChip.value === index ? -1 : index;
};
</script>

<style>
.selected-chip {
  background-color: black !important;
  color: white !important;
}
</style>
