<template lang="pug">
  .container.flex.flex-col.gap-y-2
    .label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
    .group.flex.gap-x-4.text-base(:class="{'flex-col gap-y-1': direction === 'col'}")
      .option(v-for="item in items")
        input.mr-2(
          type="radio",
          :id="item?.id",
          :value="item?.value",
          v-model="value"
        )
        span {{item?.label}}
</template>

<script>
export default {
  name: "BaseRadioButtonsGroup",
  emits: ["update:modelValue"],
  props: {
    modelValue: String,
    radioButtonsLabel: String,
    items: {
      type: Array,
      default: () => [],
    },
    direction: {
      type: String,
      default: "row",
    },
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.label
  color: var(--font-grey-color)
</style>
