<script setup lang="ts">
import BoatReservationComponent from '~/components/BoatReservationComponent.vue';
import { useReservationStore } from '~/stores/reservation';
import type { Reservation } from '~/utils/schedule.types';
import { onMounted, ref } from 'vue';

const route = useRoute();
const reservation = ref<Reservation>();

onMounted(async () => {
  const id = route.params.id as string;
  reservation.value = await useReservationStore().getReservationById(id);
});
</script>

<template>
  <q-page>
    <BoatReservationComponent v-model="reservation" />
  </q-page>
</template>
