<script lang="ts">
  /** Gleicher name für alle Radios in einer Gruppe; bind:group vom Parent hält den gewählten value. */
  let {
    name = '',
    value = '',
    /** Gebundener Wert der Gruppe – entspricht dem value des ausgewählten Radios. */
    group = $bindable(''),
    disabled = false,
    label = '',
  } = $props();
</script>

<label class="inline-flex cursor-pointer items-center {disabled ? 'cursor-not-allowed opacity-60' : ''}">
  <input
    type="radio"
    {name}
    {value}
    bind:group={group}
    {disabled}
    class="h-5 w-5 rounded-full border-[1.5px] border-stein-400 text-wald-500 hover:border-wald-400 focus:ring-2 focus:ring-wald-100 focus:ring-offset-0 checked:border-wald-500 checked:bg-wald-500"
  />
  {#if label}
    <span class="ml-2 text-base text-stein-700">{label}</span>
  {/if}
</label>
