<template>
    <div class="flex space-x-4 justify-center">
        <label :key="index" v-for="(item, index) in options" class="w-36">
            <input class="invisible absolute left-0 top-0 peer" :checked="value === item.key" @click="$emit('input', item.key)" :value="item.key" type="radio" name="category" />
            <span
                class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200"
            >
                <img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
                <span class="mt-4 font-semibold text-gray-700" v-text="item.label"></span>
            </span>
        </label>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            default: function() {
                return null;
            }
        },
        options: {
            type: Array,
            default: function() {
                return [];
            }
        }
    }
};
</script>
