<template>
  <li @click="$emit('click', $event)" class="side-text-button">
    <div class="icon-wrapper-seamless">
      <IconImage
        v-if="icon"
        :src="icon"
        :width="iconWidth"
        :height="iconHeight"
        class="seamless-icon"
      />
    </div>
    <div class="text-label" style="color: var(--text-primary);">
      {{ text }}
    </div>
  </li>
</template>

<script setup>
import IconImage from '../IconImage.vue'

defineProps({
  text:       { type: String, required: true },
  icon:       { type: String, default: '' },
  iconWidth:  { type: [String, Number], default: 30 },
  iconHeight: { type: [String, Number], default: 30 },
})

defineEmits(['click'])
</script>

<style scoped>
.side-text-button {
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.side-text-button:hover {
    background: var(--bg-tertiary) !important;
}

.icon-wrapper-seamless {
    display: flex;
    align-items: center;
    justify-content: center;
}

.seamless-icon {
    filter: brightness(1.1) contrast(1.1);
}

.text-label {
    font-weight: 500;
}
</style>
