<template>
    <div class="cursor-pointer md:px-8 lg:px-16">
        <ul class="mb-2 items-center w-full text-sm font-medium text-gray-900 bg-white border border-lightgrey rounded-lg sm:flex">
            <li
                v-for="item in options"
                :key="item.value"
                class="w-full border-b border-lightgrey sm:border-b-0 sm:border-r">
                <div class="flex items-center pl-3">
                    <input
                        :id="item.value"
                        type="radio"
                        :value="item.value"
                        name="list-radio"
                        class="w-4 h-4 text-blue-600 border-grey focus:ring-blue-500 focus:ring-2">
                    <label
                        :for="item.value"
                        class="w-full py-3 ml-2 text-sm font-medium text-gray-900">{{ item.label }}</label>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "RadioButtons",
    props: {
        options: {
            type: Array,
            default: () => []
        }
    }
}
</script>
