<script>"use strict";
import { createEventDispatcher, onMount } from "svelte";
import Radio from "./Radio.svelte";
export let options = [];
export let vertical = true;
export let size = "md";
export let name = "";
export let selectedValue = "";
export let defaultSelected = "";
export let customClass = "";
onMount(() => {
  if (!selectedValue && defaultSelected) {
    selectedValue = defaultSelected;
  }
});
const dispatch = createEventDispatcher();
function handleRadioChange(value) {
  selectedValue = value;
  dispatch("change", { value });
}
</script>

<div
	class={['flex', 'items-center', 'w-fit', 'gap-4', customClass].join(' ')}
	class:flex-col={vertical}
	class:justify-evenly={!vertical}
>
	{#each options as option}
		<Radio
			{size}
			label={option.label}
			caption={option.caption || ''}
			value={option.value}
			disabled={option.disabled || false}
			readonly={option.readonly || false}
			{name}
			group={selectedValue}
			on:change={() => handleRadioChange(option.value)}
		/>
	{/each}
</div>
