<script setup>
import ExtrasConfiguratorView from '~/components/extras/ExtrasConfiguratorView.vue'
import { buildRentExtrasPageSeo, useRentExtrasFlowContent } 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 { locale } = usePublicLocale()

useRentExtrasFlowContent(vehicleGroupId)

const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const extrasPageSeo = computed(() => buildRentExtrasPageSeo(locale.value, pageOrigin.value))

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

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

<template>
  <ExtrasConfiguratorView :vehicle-group-id="vehicleGroupId" />
</template>
