<template>
    <div class="p-6 text-center max-w-xl mx-auto">
      <h2 class="text-3xl font-bold text-orange-700 mb-6">💌 Buku Tamu 💌</h2>
  
      <div class="bg-white/70 backdrop-blur-md rounded-2xl p-6 shadow-md">
        <form @submit.prevent="submitMessage">
          <textarea
            v-model="newMessage"
            class="w-full p-3 border border-yellow-400 rounded-lg focus:ring focus:ring-yellow-300"
            rows="3"
            placeholder="Tulis ucapan untuk {{ guestName }}..."
          ></textarea>
  
          <button
            type="submit"
            class="mt-3 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full shadow-md transition"
          >
            Kirim Ucapan
          </button>
        </form>
      </div>
  
      <div class="mt-6 space-y-3">
        <div
          v-for="(msg, i) in messages"
          :key="i"
          class="bg-white/60 p-3 rounded-xl shadow text-gray-700"
        >
          💬 {{ msg }}
        </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>
  