import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from '../pages/Home';
import Database from '../pages/Database';
import MainLayout from '../components/Layouts/MainLayout';
import Brands from '../pages/Brands';
import CreatorInbox from '../pages/CreatorInbox';
import DividLayout from '../components/Layouts/DividLayout';

// Routes configuration object
const routes = [
    {
        path: '/',
        element: <Home />,
    },
    {
        path: '/creator-discovery',
        element: <Home />,
    },
    {
        path: '/creator-database',
        children: [
            {
                path: '',
                element: <Database />,
            },
            {
                path: 'tiktok',
                element: <Database path='tiktok' />,
            },
            {
                path: 'instagram',
                element: <Database path='instagram' />,
            },
            {
                path: 'youtube',
                element: <Database path='youtube' />,
            },
        ],
    },
    {
        path: '/private-creators/*',
        element: <Home />,
    },
    {
        path: '/deep-analysis',
        element: <Home />,
    },
    {
        path: '/brands',
        element: <Brands />,
    },

    {
        path: '/settings',
        element: <Home />,
    },
];

// Create router with routes wrapped in the layout
const router = createBrowserRouter([
    {
        path: '/',
        element: <MainLayout />,
        children: routes,
    },
    {
        path: '/creator-inbox',
        element: <DividLayout />,
        children: [
            {
                path: '',
                element: <CreatorInbox />,
            },
            {
                path: 'templates',
                element: <Home />,
            },
        ],
    },
]);

export default function Router() {
    return <RouterProvider router={router} />;
}

export { routes };