<template>
  <div class="w-20 flex flex-col items-center py-4">
    <div class="flex-1 space-y-4">
      <div
          v-for="tag in tags"
          :key="tag"
          :class="[
          'w-12 h-12 rounded-full flex items-center justify-center',
          tag === selectedTag ? 'bg-blue-500' : 'bg-gray-700 hover:bg-gray-600'
        ]"
          tabindex="-1"
          @click="$emit('selectTag', tag)"
      >
        {{ tag }}
      </div>
    </div>

    <div
        class="mt-auto w-12 h-12 bg-gray-600 hover:bg-gray-500 rounded-full flex items-center justify-center"
        tabindex="-1"
        @click="$emit('openOptions')"
    >
      ⚙️
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(['tags', 'selectedTag']);
defineEmits(['selectTag', 'openOptions']);
</script>
