<template>
    <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(160px,1fr))] justify-between sm:gap-4">
        <label v-for="(item, index) in options" :key="index" :for="`${id}-${index}`">
            <input
                :id="`${id}-${index}`"
                class="invisible absolute left-0 top-0 peer"
                :checked="value === item.key"
                :value="item.key"
                type="radio"
                :name="id"
                @click="$emit('update:modelValue', item.key)"
            />
            <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 items-end"
            >
                <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 text-sm" v-text="item.label"></span>
            </span>
        </label>
    </div>
</template>

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