<script setup lang="ts">
const props = defineProps<{
  feedback: "like" | "dislike" | null | undefined;
  disabled?: boolean;
}>();

const emit = defineEmits<{
  like: [];
  dislike: [];
}>();
</script>

<template>
  <div class="agent-feedback">
    <button
      class="feedback-btn"
      :class="{ active: feedback === 'like' }"
      :disabled="disabled"
      title="赞"
      @click="emit('like')"
    >
      <Icon name="lucide:thumbs-up" />
    </button>
    <button
      class="feedback-btn"
      :class="{ active: feedback === 'dislike' }"
      :disabled="disabled"
      title="踩"
      @click="emit('dislike')"
    >
      <Icon name="lucide:thumbs-down" />
    </button>
  </div>
</template>

<style scoped>
.agent-feedback {
  display: flex;
  gap: 4px;
}

.feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 14px;
  transition: all 0.15s;
}

.feedback-btn:hover:not(:disabled) {
  background: var(--color-surface-soft);
  color: var(--color-body);
}

.feedback-btn.active {
  color: var(--color-primary);
}

.feedback-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
</style>
