<template>
  <div>
    <div v-for="(radioItem, id) in options" :key="id" class="radio-selection">
      <label :for="'radio-' + radioItem.name + '-' + id" @click="clickEvent(id)">
        {{ radioItem.label }}
        <input :id="'radio-' + radioItem.name + '-' + id" :value="radioItem.value" type="radio" :name="radioItem.name" :checked="value === radioItem.value">
        <span class="checkmark" />
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    clickEvent (id) {
      const values = this.options[id]
      this.$emit('input', values.value)
    }
  }
}
</script>
<style src="./Radio.scss" lang="scss"></style>
