<template>
    <div class="modal-overlay" @click="$emit('close')">
        <div class="modal-content" @click.stop>
            <div class="modal-header">
                <h2 class="modal-title">Бронирование</h2>
                <button class="modal-close" @click="$emit('close')">✕</button>
            </div>
            <div class="modal-body">
                <!-- Контент модального окна бронирования -->
                <div class="booking-summary">
                    <h3>{{ object?.title }}</h3>
                    <p>{{ object?.city }}, {{ object?.address }}</p>
                </div>
                <!-- Форма бронирования -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// Определяем тип объекта недвижимости
interface RentalObject {
  title: string;
  city?: string;     // опционально, если может отсутствовать
  address?: string;  // опционально
  // другие поля при необходимости
}

defineProps<{
  object: RentalObject | null | undefined;
  dates: unknown;
  guests: string;
}>()

defineEmits<{
  close: [];
  confirm: [bookingData: unknown];
}>()
</script>
