<template>
  <button @click="update('left')">
    <svg
      class="inline border-gray-400 rounded-md"
      :class="{border: modelValue === 'left'}"
      height="40"
      viewBox="0 0 21 21"
      width="40"
      xmlns="http://www.w3.org/2000/svg"
    ><g
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-linejoin="round"
    ><path d="m4.5 6.5h12" /><path d="m4.498 10.5h5.997" /><path d="m4.5 14.5h9.995" /></g></svg>
  </button>

  <button @click="update('center')">
    <svg
      class="inline border-gray-400 rounded-md"
      :class="{border: modelValue === 'center'}"
      height="40"
      viewBox="0 0 21 21"
      width="40"
      xmlns="http://www.w3.org/2000/svg"
    ><g
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-linejoin="round"
    ><path d="m4.5 6.5h12" /><path d="m7.498 10.5h5.997" /><path d="m5.5 14.5h9.995" /></g></svg>
  </button>

  <button @click="update('right')">
    <svg
      class="inline border-gray-400 rounded-md"
      :class="{border: modelValue === 'right'}"
      height="40"
      viewBox="0 0 21 21"
      width="40"
      xmlns="http://www.w3.org/2000/svg"
    ><g
      fill="none"
      fill-rule="evenodd"
      stroke-linecap="round"
      stroke-linejoin="round"
    ><path d="m4.5 6.5h12" /><path d="m10.498 10.5h5.997" /><path d="m6.5 14.5h9.995" /></g></svg>
  </button>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      default: null,
      required: false,
    },
  },
  emits: ['update:modelValue'],
  methods: {
    update(value) {
      this.$emit('update:modelValue', value)
    },
  }
}
</script>
