<template>
    <div class="bm-variant-picker">
        <button
            type="button"
            class="bm-variant-picker__current"
            :disabled="variants.length <= 1"
            @click="open = !open"
        >
            <span>{{ value }}</span>
            <span v-if="variants.length > 1" class="bm-variant-picker__chevron">▾</span>
        </button>
        <ul v-if="open && variants.length > 1" class="bm-variant-picker__list">
            <li
                v-for="variant in variants"
                :key="variant.id"
                class="bm-variant-picker__item"
                :class="{ 'is-active': variant.id === value }"
                @click="pick(variant.id)"
            >{{ variant.label }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'VariantPicker',
    props: {
        value: { type: String, required: true },
        variants: { type: Array, required: true },
    },
    data() {
        return { open: false };
    },
    methods: {
        pick(id) {
            this.open = false;
            this.$emit('input', id);
        },
    },
};
</script>
