<template>
  <section class="text-center p-6 max-w-lg mx-auto">
    <h2 class="text-3xl font-bold text-blue-700 mb-6">💬 Buku Tamu</h2>

    <p class="text-gray-600 mb-4">{{ saySomething }}</p>

    <form @submit.prevent="sendMessage" class="space-y-3">
      <input
        v-model="guestNameInput"
        type="text"
        placeholder="Nama Anda"
        class="w-full border rounded-lg px-4 py-2"
        required
      />
      <textarea
        v-model="messageInput"
        rows="3"
        placeholder="Tulis ucapan Anda..."
        class="w-full border rounded-lg px-4 py-2"
        required
      ></textarea>
      <button
        type="submit"
        class="bg-blue-600 text-white px-5 py-2 rounded-full shadow hover:bg-blue-700"
      >
        Kirim
      </button>
    </form>

    <div v-if="messages.length" class="mt-8 text-left space-y-4">
      <div
        v-for="(msg, index) in messages"
        :key="index"
        class="bg-white/70 p-4 rounded-lg shadow"
      >
        <p class="font-semibold text-blue-700">{{ msg.name }}</p>
        <p class="text-gray-700">{{ msg.text }}</p>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  guestName: String,
  saySomething: String,
  messages: Array
})
const emit = defineEmits(['addMessage'])

const guestNameInput = ref(props.guestName || '')
const messageInput = ref('')

const sendMessage = () => {
  if (!guestNameInput.value || !messageInput.value) return
  emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
  messageInput.value = ''
}
</script>
