CityCards-Website/src/AppRouter.tsx

import { Routes, Route, useParams, useLocation, useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'motion/react';

// Import all your pages
import { LoginModal } from './components/LoginModal';
import { MelbournePage } from './components/MelbournePage';
import { PassesPage } from './components/PassesPage';
import { AttractionsPage } from './components/AttractionsPage';
import { AttractionDetailsPage } from './components/AttractionDetailsPage';
import { CheckoutPage } from './components/CheckoutPage';
import { SecureCheckoutPage } from './components/SecureCheckoutPage';
import { BlogsPage } from './components/BlogsPage';
import { BlogDetailsPage } from './components/BlogDetailsPage';
import { HowItWorksPage } from './components/HowItWorksPage';
import { FAQPage } from './components/FAQPage';
import { PrivacyPolicyPage } from './components/PrivacyPolicyPage';
import { AboutUsPage } from './components/AboutUsPage';
import { ProfilePage } from './components/ProfilePage';
import { CreateMagicItineraryPage } from './components/CreateMagicItineraryPage';
import { ItineraryViewPage } from './components/ItineraryViewPage';
import { OffersPage } from './components/OffersPage';
import { CityCardsPage } from './components/CityCardsPage';
import { MagicItineraryPage } from './components/MagicItineraryPage';
import { PostCardsPage } from './components/PostCardsPage';
import { DownloadAppPage } from './components/DownloadAppPage';
import { EsimsPage } from './components/EsimsPage';
import { HotelDiscountsPage } from './components/HotelDiscountsPage';
import { ContactUsPage } from './components/ContactUsPage';

import { pageTransition } from './utils/animations';
import { LandingPage } from './pages/landingPage';
import ComingSoonPage from './pages/ComingSoonPage';
import { SuperSavingsPage } from './components/SuperSavingsPage';
import { WhatsIncluded } from './components/WhatsIncluded';
import { LandingMagicItineraryPage } from './components/LandingMagicItineraryPage';

// User type definition
interface User {
    email: string;
    name: string;
}

interface AppRouterProps {
    user: User | null;
    activeCity: string;
    onCityChange: (city: string) => void;
    showLoginModal: boolean;
    onSignInClick: () => void;
    onSignOutClick: () => void;
    onLoginSuccess: (userData: User) => void;
    onCloseLoginModal: () => void;
    onCheckoutClick?: () => void;
    offersSource: 'products' | 'passes';
}

export function AppRouter({
    user,
    activeCity,
    onCityChange,
    showLoginModal,
    onSignInClick,
    onSignOutClick,
    onLoginSuccess,
    onCloseLoginModal,
    onCheckoutClick,
    offersSource
}: AppRouterProps) {
    const location = useLocation();
    const { attractionId, blogId } = useParams();

    // Common navigation handlers for all pages
    const commonNavHandlers = {
        onSignInClick,
        onSignOutClick,
        user,
    };

    const navigate = useNavigate();

    return (
        <>
            <AnimatePresence mode="wait">
                <Routes location={location} key={location.pathname}>
                    {/* Landing Page Route */}
                    <Route path="/" element={
                        <motion.div key="landing" {...pageTransition}>
                            <LandingPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Home Route */}
                    <Route path="/melbourne" element={
                        <motion.div key="home" {...pageTransition}>
                            <MelbournePage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Passes Route */}
                    <Route path="/passes" element={
                        <motion.div key="passes" {...pageTransition}>
                            <PassesPage
                                {...commonNavHandlers}
                                onCheckoutClick={onCheckoutClick}
                                onLoginSuccess={onLoginSuccess}
                            />
                        </motion.div>
                    } />

                    {/* Attractions Routes */}
                    <Route path="/attractions" element={
                        <motion.div key="attractions" {...pageTransition}>
                            <AttractionsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/attractions/:attractionId" element={
                        <motion.div key="attraction-details" {...pageTransition}>
                            <AttractionDetailsPage
                                attractionId={attractionId || ''}
                                {...commonNavHandlers}
                                onBackClick={() => navigate(-1)}
                                onCheckoutClick={() => navigate('/checkout')}
                            />
                        </motion.div>
                    } />

                    {/* Checkout Routes */}
                    <Route path="/checkout" element={
                        <motion.div key="checkout" {...pageTransition}>
                            <CheckoutPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/secure-checkout" element={
                        <motion.div key="secure-checkout" {...pageTransition}>
                            <SecureCheckoutPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Blog Routes */}
                    <Route path="/blogs" element={
                        <motion.div key="blogs" {...pageTransition}>
                            <BlogsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/blogs/:blogId" element={
                        <motion.div key="blog-details" {...pageTransition}>
                            <BlogDetailsPage
                                blogId={blogId || ''}
                                {...commonNavHandlers}
                            />
                        </motion.div>
                    } />

                    {/* Information Pages */}
                    <Route path="/how-it-works" element={
                        <motion.div key="how-it-works" {...pageTransition}>
                            <HowItWorksPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/faq" element={
                        <motion.div key="faq" {...pageTransition}>
                            <FAQPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/privacy-policy" element={
                        <motion.div key="privacy-policy" {...pageTransition}>
                            <PrivacyPolicyPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/about-us" element={
                        <motion.div key="about-us" {...pageTransition}>
                            <AboutUsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* User Routes */}
                    <Route path="/profile" element={
                        <motion.div key="profile" {...pageTransition}>
                            <ProfilePage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Itinerary Routes */}
                    <Route path="/create-itinerary" element={
                        <motion.div key="create-itinerary" {...pageTransition}>
                            <CreateMagicItineraryPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/itinerary-view" element={
                        <motion.div key="itinerary-view" {...pageTransition}>
                            <ItineraryViewPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/magic-itinerary" element={
                        <motion.div key="magic-itinerary" {...pageTransition}>
                            <MagicItineraryPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Products Routes */}
                    <Route path="/offers" element={
                        <motion.div key="offers" {...pageTransition}>
                            <OffersPage fromSource={offersSource} {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/citycards" element={
                        <motion.div key="citycards" {...pageTransition}>
                            <CityCardsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/postcards" element={
                        <motion.div key="postcards" {...pageTransition}>
                            <PostCardsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/landing-magic-itinerary" element={
                        <motion.div key="landing-magic-itinerary" {...pageTransition}>
                            <LandingMagicItineraryPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/whats-included" element={
                        <motion.div key="whats-included" {...pageTransition}>
                            <WhatsIncluded {...commonNavHandlers} />
                        </motion.div>
                    } />


                    <Route path="/hotel-discounts" element={
                        <motion.div key="hotel-discounts" {...pageTransition}>
                            <HotelDiscountsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/download-app" element={
                        <motion.div key="download-app" {...pageTransition}>
                            <DownloadAppPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/contact-us" element={
                        <motion.div key="contact-us" {...pageTransition}>
                            <ContactUsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/comming-soon" element={
                        <motion.div key="comming-soon" {...pageTransition}>
                            <ComingSoonPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/super-savings" element={
                        <motion.div key="super-savings" {...pageTransition}>
                            <SuperSavingsPage {...commonNavHandlers} />
                        </motion.div>
                    } />
                </Routes>
            </AnimatePresence>

            <LoginModal
                isOpen={showLoginModal}
                onClose={onCloseLoginModal}
                onLoginSuccess={onLoginSuccess}
            />
        </>
    );
}