<template>
<!--  <li class="flex-auto rounded-md border-2 px-1 py-1.5 mr-2.5 mb-2.5 font-general-medium text-base sm:text-lg cursor-pointer select-none"-->
  <li :class="[isActive ? activeClass : inactiveClass, hoverClass]"
      :data-filter="`.${value}`"
      @click="$emit('change', value)"
  >
    {{ name }}
  </li>
</template>

<script>
export default {
  name: "FilterOption",
  props: {
    name: {type: String, required: true},
    value: {type: String, required: true},
    isActive: {type: Boolean, default: false},
  },

  data: () => ({
    inactiveClass: "",
    activeClass: "underline underline-offset-8",
    hoverClass: "hover:underline hover:underline-offset-8",
    // inactiveClass: "border-gray-700 text-gray-700",
    // activeClass: "bg-secondary-dark border-secondary-dark text-white",
    // hoverClass: "hover:bg-ternary-dark hover:bg-ternary-dark hover:text-white",
  })
}
</script>

<style lang="css" scoped>
ul li {
  transition: all .5s ease;
}
</style>
