<template>
    <div class="flex gap-20">
        <div v-for="item in icons" :key="item" class="icon-container" @click="handleClick(item)" :active="item === active">
            <icon :name="item" :size="84" />
        </div>
    </div>
</template>
<script setup>

const props= defineProps({
    modelValue: {
        type: String,
    }
})

const emit = defineEmits(['update:modelValue'])

const icons = ['local-icon-ic_01', 'local-icon-ic_02', 'local-icon-ic_03', 'local-icon-ic_04', 'local-icon-ic_05', 'local-icon-ic_06']

const active = ref(props.modelValue)

function handleClick(item) {
    active.value = item
    emit('update:modelValue', item)
}
</script>
<style lang="scss" scoped>
.icon-container {
    border: 1px solid transparent;
    cursor: pointer;
    padding: 8px;
    &:hover, &[active=true] {
        background: #DCE4FF;
        border-color: #4759D9;
    }
}
</style>