<template>
  <div class="min-h-screen bg-gradient-to-br from-yellow-200 to-orange-200 py-10 px-6 text-center">
    <h2 class="text-3xl font-bold text-orange-700 mb-6">📖 Buku Tamu</h2>

    <p class="mb-4">Tinggalkan ucapan terbaikmu untuk {{ guestName || 'Teman Kami' }} 💌</p>

    <form @submit.prevent="submitMessage" class="max-w-md mx-auto bg-white p-6 rounded-2xl shadow-md">
      <textarea
        v-model="message"
        rows="3"
        placeholder="Tulis ucapan di sini..."
        class="w-full border rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-orange-400"
      ></textarea>

      <button
        type="submit"
        class="mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
      >
        Kirim
      </button>
    </form>

    <div v-if="messages.length" class="mt-8 max-w-md mx-auto text-left">
      <h3 class="text-lg font-semibold text-gray-700 mb-3">Ucapan:</h3>
      <ul class="space-y-3">
        <li v-for="(msg, i) in messages" :key="i" class="bg-white p-4 rounded-lg shadow">
          {{ msg }}
        </li>
      </ul>
    </div>
  </div>
</template>

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

defineProps({
  guestName: String,
  messages: Array
})

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

const submitMessage = () => {
  if (message.value.trim()) {
    emit('addMessage', message.value)
    message.value = ''
  }
}
</script>
