---
import type { SlRadioGroup } from '@shoelace-style/shoelace';

interface Props extends Omit<SlRadioGroup, any> {
    /**
     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
     * instead.
     */
    label?: string;
    /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText?: string;
    /** The name of the radio group, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the radio group, submitted as a name/value pair with form data. */
    value: string;
    /** The radio group's size. This size will be applied to all child radios and radio buttons. */
    size?: 'small' | 'medium' | 'large';
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form?: string;
    /** Ensures a child radio is checked before allowing the containing form to submit. */
    required?: boolean;
    id?: string;
}

const { name, id, size, value, form, helpText, label, required, ...rest } = Astro.props;
---

<sl-radio-group
    {label}
    {helpText}
    {name}
    {value}
    {id}
    {size}
    {form}
    {required}
    {...rest}
    >
    <slot />
</sl-radio-group>

<script>
    import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
</script>