<script>
import FilterOption from "@/components/gallery/FilterOption.vue";

export default {
  components: {FilterOption},
  props: {
    options: {
      type: Array,
      default: []
    },
    initialOption: {
      type: String
    },
  },

  data: function () {
    return {
      selectedOption: this.initialOption,
    }
  },

  watch: {
    selectedOption: function () {
      this.$emit('change', this.selectedOption)
    }
  }
};
</script>

<template>
<!--  <ul id="gallery-filter" class="flex flex-row flex-wrap text-left mt-50">-->
  <ul id="gallery-filter"
      class="grid grid-cols-1 sm:grid-cols-2 md:flex md:flex-wrap gap-y-2.5 gap-x-6
      text-left mt-50">
<!--      class="flex-auto mr-2.5 mb-2.5 text-white font-general-regular text-xl cursor-pointer select-none"-->
    <FilterOption
      class="text-white font-general-light text-xl lg:text-2xl cursor-pointer select-none tracking-wide"

      v-for="(option, index) in options"
      :key="index"
      :name="option.name"
      :value="option.value"
      :isActive="selectedOption === option.value"
      @change="selectedOption = $event"/>
  </ul>
</template>

<style lang="css" scoped>

</style>
