<template>
  <div class="p-6 text-center max-w-2xl mx-auto">
    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
      💌 Buku Tamu 💌
    </h2>

    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8">
      <form @submit.prevent="submitMessage" class="space-y-4">
        <textarea
          v-model="newMessage"
          class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"
          rows="4"
          placeholder="Tulis ucapan untuk {{ guestName }}..."
        ></textarea>

        <button
          type="submit"
          class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
          :disabled="!newMessage.trim()"
        >
          ✨ Kirim Ucapan
        </button>
      </form>
    </div>

    <div class="space-y-4 max-h-96 overflow-y-auto px-2">
      <div
        v-for="(msg, i) in messages"
        :key="i"
        class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300"
      >
        <div class="flex items-start space-x-3">
          <div class="bg-gradient-to-r from-orange-500 to-yellow-500 p-2 rounded-full">
            <span class="text-white text-sm">💬</span>
          </div>
          <p class="text-gray-700 text-left flex-1">{{ msg }}</p>
        </div>
      </div>

      <div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
        <p class="text-gray-600">Belum ada ucapan. Jadilah yang pertama mengucapkan!</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  guestName: String,
  messages: Array
})

const emit = defineEmits(['addMessage'])
const newMessage = ref('')

function submitMessage() {
  if (!newMessage.value.trim()) return
  emit('addMessage', newMessage.value)
  newMessage.value = ''
}
</script>