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

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