import { createBrowserRouter, Navigate } from 'react-router-dom';
import App from '@/App';
import Login from '@/pages/Login/Login';
import VerifyOtp from '@/pages/VerifyOtp/VerifyOtp';
import Home from '@/pages/Home/Home';
import Profile from '@/pages/Profile/Profile';
import Billboards from '@/pages/Billboards/Billboards';
import AdDetail from '@/pages/Billboards/AdDetail';
import ProtectedRoute from '@/components/ProtectedRoute';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        index: true,
        element: (
          <ProtectedRoute>
            <Home />
          </ProtectedRoute>
        ),
      },
      {
        path: 'login',
        element: <Login />,
      },
      {
        path: 'verify-otp',
        element: <VerifyOtp />,
      },
      {
        path: 'profile',
        element: (
          <ProtectedRoute>
            <Profile />
          </ProtectedRoute>
        ),
      },
      {
        path: 'billboards',
        element: (
          <ProtectedRoute>
            <Billboards />
          </ProtectedRoute>
        ),
      },
      {
        path: 'billboards/:uuid',
        element: (
          <ProtectedRoute>
            <AdDetail />
          </ProtectedRoute>
        ),
      },
      {
        path: '*',
        element: <Navigate to="/" replace />,
      },
    ],
  },
]);