<template>
  <div class="flex items-end gap-2">
    <!-- Attachment button -->
    <UButton
      variant="ghost"
      icon="i-lucide-paperclip"
      class="text-[var(--wa-text-muted)]"
    />

    <!-- Text input -->
    <div class="flex-1">
      <UTextarea
        v-model="message"
        placeholder="Escribe un mensaje..."
        :rows="1"
        autoresize
        :maxrows="5"
        class="bg-[var(--wa-bg-light)]"
        @keydown.enter.exact.prevent="handleSend"
      />
    </div>

    <!-- Send button -->
    <UButton
      :icon="message.trim() ? 'i-lucide-send' : 'i-lucide-mic'"
      :disabled="!message.trim()"
      @click="handleSend"
    />
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  send: [content: string]
}>()

const message = ref('')

const handleSend = () => {
  if (!message.value.trim()) return

  emit('send', message.value)
  message.value = ''
}
</script>
