<script setup>
defineProps({
    color: {
        type: String,
        default: null,
    },
    avatarClass: {
        type: String,
        default: null,
    },
    selected: {
        type: Boolean,
        default: undefined,
    },
});
defineEmits(['update:selected']);
</script>

<template>
    <QChip
        class="text-white q-ma-none"
        :selected="selected"
        :style="{ backgroundColor: selected ? color : 'black' }"
        @update:selected="$emit('update:selected', $event)"
    >
        <QAvatar
            :color="color"
            :class="avatarClass"
            :style="{ backgroundColor: color }"
        />
        <slot />
    </QChip>
</template>
