<script setup lang="ts">
import { usePage } from "@inertiajs/vue3";
import AppLayout from "@/layouts/AppLayout.vue";
import TourOverviewSection from "./TourOverviewSection.vue";
import type { Tour } from "@/types";
import TourQuickFacts from "@/components/TourNavigator/TourQuickFacts.vue";
import SectionTitle from "@/components/dredgy/SectionTitle.vue";

interface Properties {
  tour: Tour;
  nextHref?: string | null;
}

const { tour, nextHref } = usePage().props as unknown as Properties;

defineOptions({
  layout: AppLayout,
});
</script>

<template>
    <section class="tour-overview-section">
        <SectionTitle
            title=""
            :gradient="tour.name"
            :subtitle="tour.short_description ?? ''"
        />
    </section>
    <TourOverviewSection :tour="tour" />
</template>

<style scoped>
    .tour-overview-section{
        margin-top: 10dvh;
    }
</style>
