package elements

templ RadioGroup() {
	<div
		x-data="{
    radioGroupSelectedValue: null,
    radioGroupOptions: [
        {
            title: 'Email Address',
            description: 'Get a login code to your email address.',
            value: 'email'
        },
        {
            title: 'Phone Number',
            description: 'Get a login code to your phone number.',
            value: 'phone'
        },
        {
            title: 'Passkey',
            description: 'Sign in with your passkey.',
            value: 'passkey'
        }
    ]
}"
		class="space-y-3"
	>
		<template x-for="(option, index) in radioGroupOptions" :key="index">
			<label @click="radioGroupSelectedValue=option.value" class="flex items-start p-5 space-x-3 bg-white border rounded-md shadow-sm hover:bg-gray-50 border-neutral-200/70">
				<input type="radio" name="radio-group" :value="option.value" class="text-gray-900 translate-y-px focus:ring-gray-700"/>
				<span class="relative flex flex-col text-left space-y-1.5 leading-none">
					<span x-text="option.title" class="font-semibold"></span>
					<span x-text="option.description" class="text-sm opacity-50"></span>
				</span>
			</label>
		</template>
	</div>
}