<template>
  <div class="radio-container">
    <label class="radio-item" @change="setOption">
      <input
          type="radio"
          :name="name"
          :value="value"
          :checked="isSelected"
      >
      <span class="radiomark"></span>
      <span class="radio-label"><slot></slot></span>
    </label>
  </div>
</template>

<script>
export default{
  emits:["update:modelValue", "option-changed"],
  props: {
    value: {
      type: [String, Number, Boolean],
      required: true
    },
    modelValue: {
      type: [String, Number, Boolean],
      default: null,
      required: false
    },
    name: {
      type: String,
      required: true
    }
  },
  name: "RadioOption",
  computed: {
    isSelected() {
      return this.modelValue === this.value;
    }
  },
  methods: {
    setOption(event) {
      if (event.target.checked) {
        this.$emit('update:modelValue', this.value);
        this.$emit('option-changed', this.value);
      }
    }
  }
}
</script>

<style>

.radio-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.radio-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.radio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radiomark {
  position: relative;
  height: 2rem;
  width: 2rem;
  background-color: #ffffff;
  border: 0.2rem solid #DCDCDC;
  border-radius: 50%;
  margin-right: 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-item:hover .radiomark {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.radio-item input:checked ~ .radiomark {
  background-color: #002F54;
  border-color: #002F54;
}

.radiomark::after {
  content: "";
  position: absolute;
  display: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: white;
}

.radio-item input:checked ~ .radiomark::after {
  display: block;
}

.radio-label {
  color: #002F54;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
</style>