<template>
  <section class="w-full max-w-4xl mx-auto text-center">
    <h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
      Buku Tamu
    </h1>

    <!-- Form -->
    <div class="bg-yellow-300/60 rounded-3xl p-6 shadow-xl mb-8">
      <form @submit.prevent="submitMessage" class="space-y-4">
        <input v-model="form.name" type="text" placeholder="Nama"
          class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500">
        <textarea v-model="form.message" placeholder="Ucapan"
          class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500"></textarea>
        <select v-model="form.attendance"
          class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500">
          <option value="yes">Hadir</option>
          <option value="no">Tidak Hadir</option>
          <option value="maybe">Mungkin</option>
        </select>
        <button type="submit"
          class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-xl font-semibold shadow-lg">
          Kirim
        </button>
      </form>
    </div>

    <!-- Messages -->
    <div class="space-y-4">
      <div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
        <div class="flex items-center justify-between mb-2">
          <span class="font-bold text-orange-800">{{ msg.name }}</span>
          <span :class="getAttendanceClass(msg.attendance)" class="text-sm px-2 py-1 rounded-lg">
            {{ msg.attendance }}
          </span>
        </div>
        <p class="text-gray-700">{{ msg.message }}</p>
      </div>
    </div>
  </section>
</template>

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

const messages = ref([
  { id: 1, name: 'Gempita', message: 'Selamat ulang tahun cipung', attendance: 'yes' },
  { id: 2, name: 'Ayu Ting Ting', message: 'Selamat ulang tahun anak mama gigi', attendance: 'maybe' }
])

const form = ref({ name: '', message: '', attendance: 'yes' })

const submitMessage = () => {
  if (form.value.name && form.value.message) {
    messages.value.push({
      id: Date.now(),
      ...form.value
    })
    form.value = { name: '', message: '', attendance: 'yes' }
  }
}

const getAttendanceClass = (attendance) => {
  switch (attendance) {
    case 'yes': return 'bg-green-100 text-green-700'
    case 'no': return 'bg-red-100 text-red-700'
    case 'maybe': return 'bg-yellow-100 text-yellow-700'
    default: return 'bg-gray-100 text-gray-700'
  }
}
</script>
