<template>
	<label :for="id" :class="radioClass" :id="`${id}-radio-label`">
		<input
			:id="id"
			type="radio"
			:checked="isChecked"
			:name="name"
			:value="value"
			@change="$emit('change', $event.target.value)"
			:disabled="disabled"
		/>
		<span :id="`${id}-radio-icon`" v-if="icon" class="wcc-radio-icon"
			><img :src="require(`@/assets/${icon}`)"
		/></span>
		<span class="wcc-radio-label" :id="`${id}-radio-label`" v-if="label">
			{{ label }}
		</span>
	</label>
</template>

<script>
export default {
	name: "Radio",
	components: {},
	model: {
		prop: "modelValue",
		event: "change",
	},
	props: {
		id: {
			type: String,
			required: true,
		},
		name: {
			type: String,
			default: "",
		},
		value: {
			type: [String, Boolean],
			required: true,
		},
		label: {
			type: String,
			default: "",
		},
		icon: {
			type: String,
			default: "",
		},
		modelValue: { default: "" },
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			selected: false,
		};
	},
	computed: {
		radioClass() {
			return {
				"wcc-radio": true,
				"wcc-image-radio": this.icon !== "",
				checked: this.isChecked,
			};
		},
		isChecked() {
			return this.modelValue == this.value;
		},
	},
};
</script>
