<template lang="pug">
  .container.flex.flex-col.gap-y-2
    .label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
    .group.flex.text-base(:class="radioGroupClasses")
      .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: () => [],
    },
    directionColumn: Boolean,
    columnGap: String,
    rowGap: String,
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
    radioGroupClasses() {
      if (this.directionColumn) {
        return this.columnGap
          ? {
              "flex-col": true,
              [this.columnGap]: true,
            }
          : {
              "flex-col": true,
              "gap-y-1": true,
            };
      }
      if (this.rowGap)
        return {
          [this.rowGap]: true,
        };
      return {
        "gap-x-4": true,
      };
    },
  },
};
</script>

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