<script lang="ts">
	import { RadioGroup } from 'melt/builders';
	import type { RadioGroupProps } from 'melt/builders';
	import { scale } from 'svelte/transition';

	let {
		items,
		label,
		...props
	}: RadioGroupProps & {
		items: string[];
		label: string;
	} = $props();

	const group = new RadioGroup(props);
	const isVert = $derived(group.orientation === 'vertical');
</script>

<div class="flex w-fit flex-col gap-2" {...group.root}>
	<label {...group.label} class="font-medium">{label}</label>
	<div class="flex {isVert ? 'flex-col gap-1' : 'flex-row gap-3'}">
		{#each items as i}
			{@const item = group.getItem(i)}
			<div
				class="outline-hidden ring-accent-500 focus-visible:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 group -ml-1 flex items-center gap-3
					rounded p-1"
				{...item.attrs}
			>
				<div
					class="group-aria-[checked]:border-accent-500 relative size-6
					rounded-full border-2 border-neutral-400 bg-neutral-100 shadow-sm
					hover:bg-gray-100 group-aria-[checke]:bg-transparent
					data-[disabled=true]:bg-gray-400 dark:border-white dark:bg-transparent"
				>
					{#if item.checked}
						<div
							class="group-aria-[checked]:bg-accent-500 absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2
							rounded-full"
							aria-hidden="true"
							transition:scale={{ duration: 75 }}
						></div>
					{/if}
				</div>

				<span class="cursor-default select-none font-semibold capitalize leading-none">
					{i}
				</span>
			</div>
		{/each}
	</div>
	<input {...group.hiddenInput} />
</div>
