<template>
  <button
      @click="$emit('click')"
      class="sort-button"
      :class="{ 'active': active }"
  >
    <PhCaretUp  weight="fill"
        :size="16"
        class="sort-icon"
        :class="{ 'rotate': direction === 'asc' }"
    />
  </button>
</template>

<script>
import {PhArrowCircleUp, PhCaretUp, PhFunnelSimple} from '@phosphor-icons/vue';

export default {
  name: "SortButton",
  components: {
    PhCaretUp,
    PhArrowCircleUp,
    PhFunnelSimple
  },
  emits: ['click'],
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: 'desc',
      validator: (d) => (d === 'desc' || d === 'asc'),
    }
  }
}
</script>

<style scoped>
.sort-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.sort-icon {
  color: #6B869C;
  transition: transform 0.3s ease, color 0.2s ease;
}

.sort-button.active .sort-icon {
  color: #002F54;
}

.sort-icon.rotate {
  transform: rotate(180deg);
}
</style>