<script setup>
import CheckoutFlowView from '~/components/checkout/CheckoutFlowView.vue'
import { buildCheckoutPageSeo, useCheckoutFlowContent } from '~/content/bookingFlow'
import { buildPublicSeoLinks } from '~/utils/public-seo'

definePageMeta({
  pageTransition: {
    name: 'rent-flow',
    mode: 'out-in',
  },
})

const route = useRoute()
const runtimeConfig = useRuntimeConfig()
const vehicleGroupId = computed(() => Number(route.params.id || 0) || null)

const { checkoutPage } = useCheckoutFlowContent(vehicleGroupId)

const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const checkoutPageSeo = computed(() => buildCheckoutPageSeo(checkoutPage.value, pageOrigin.value))

useSeoMeta({
  title: () => checkoutPageSeo.value.title,
  description: () => checkoutPageSeo.value.description,
  ogTitle: () => checkoutPageSeo.value.ogTitle,
  ogDescription: () => checkoutPageSeo.value.ogDescription,
  robots: () => checkoutPageSeo.value.robots,
})

useHead(() => ({
  link: buildPublicSeoLinks(checkoutPageSeo.value),
}))
</script>

<template>
  <CheckoutFlowView />
</template>
