import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';
import LoadingComponent from '@/pages/Loadingpage.vue';
const LoadingAsyncComponent = (component) => defineAsyncComponent({
loader: () => component,
loadingComponent: LoadingComponent,
});
const HomeView = LoadingAsyncComponent(import('@/pages/HomePage.vue'));
const WeddingPhotoBooth = LoadingAsyncComponent(import('@/pages/WeddingPhotoBooth.vue'));
const VideoBooth = LoadingAsyncComponent(import('@/pages/VideoBooth.vue'));
const BlogsPages = LoadingAsyncComponent(import('@/pages/BlogsPages.vue'));
const BlogPost = LoadingAsyncComponent(import('@/pages/BlogPost.vue'));
const ContactForm = LoadingAsyncComponent(import('@/pages/ContactForm.vue'));
const BookBooth = LoadingAsyncComponent(import('@/pages/BookBoothWithUs.vue'));
const Gallery = LoadingAsyncComponent(import('@/pages/Gallery.vue'));
const Detail = LoadingAsyncComponent(import('@/pages/Detail.vue'));
const PartiesPhotoBooth = LoadingAsyncComponent(import('@/pages/PartiesPhotoBooth.vue'));
const CorporatePhotoBooth = LoadingAsyncComponent(import('@/pages/CorporatePhotoBooth.vue'));
const BrandActivationPhotoBooth = LoadingAsyncComponent(import('@/pages/BrandActivationPhotoBooth.vue'));
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: '/', name: 'Home', component: HomeView },
{ path: '/booth/photo-booth', name: 'Photo-booth', component: WeddingPhotoBooth },
{ path: '/booth/video-booth', name: 'videoBooth', component: VideoBooth },
{ path: '/blogs', name: 'blogs', component: BlogsPages },
{ path: '/blogs-post/:id', name: 'blogsPost', component: BlogPost, meta: { breadcrumb: "Blog Post" }, props: true },
{ path: '/contact', name: 'contact', component: ContactForm },
{ path: '/book-booth', name: 'BookBooth', component: BookBooth },
{ path: '/gallery', name: 'Gallery', component: Gallery },
{ path: '/detail', name: 'Detail', component: Detail },
{ path: '/parties', name: 'Parties', component: PartiesPhotoBooth },
{ path: '/corporate', name: 'Corporate', component: CorporatePhotoBooth },
{ path: '/brand-activations', name: 'BrandActivation', component: BrandActivationPhotoBooth },
{ path: '/:pathMatch(.*)*', component: HomeView },
],
});
export default router;