import { defineComponent, h } from "vue";
import { cx } from "../utils.js";

export default defineComponent({
	name: "GnRadio",
	inheritAttrs: false,
	props: {
		modelValue: { type: [String, Number, Boolean], default: "" },
		value: { type: [String, Number, Boolean], required: true },
		label: { type: String, default: "" },
		name: { type: String, default: "" },
		disabled: { type: Boolean, default: false }
	},
	emits: ["update:modelValue"],
	setup(props, { attrs, emit, slots }) {
		return () => h("label", { class: cx("radio", attrs.class) }, [
			h("input", {
				...attrs,
				type: "radio",
				name: props.name,
				value: props.value,
				checked: props.modelValue === props.value,
				disabled: props.disabled,
				onChange: () => emit("update:modelValue", props.value)
			}),
			h("span", { class: "radio-control", "aria-hidden": "true" }),
			h("span", { class: "radio-label" }, slots.default?.() || props.label)
		]);
	}
});