import {Navigate, Routes, Route, Outlet} from 'react-router-dom'
import {PageLink, PageTitle} from '../../../_digifi/layout/core'
import {Overview} from './components/Overview'
import {Projects} from './components/Projects'
import {Campaigns} from './components/Campaigns'
import {Documents} from './components/Documents'
import {Connections} from './components/Connections'
import {ProcessHeader} from './ProcessHeader'

const processBreadCrumbs: Array<PageLink> = [
  {
    title: 'Loan',
    path: '/loan/pages/process/started',
    isSeparator: false,
    isActive: false,
  },
  {
    title: '',
    path: '',
    isSeparator: true,
    isActive: false,
  },
]

const ProcessPage = () => (
  <Routes>
    <Route
      element={
        <>
          <ProcessHeader />
          <Outlet />
        </>
      }
    >
      <Route
        path='started'
        element={
          <>
            <PageTitle breadcrumbs={processBreadCrumbs}>Started</PageTitle>
            <Overview />
          </>
        }
      />
      <Route
        path='pending'
        element={
          <>
            <PageTitle breadcrumbs={processBreadCrumbs}>Pending</PageTitle>
            <Projects />
          </>
        }
      />
      <Route
        path='ready'
        element={
          <>
            <PageTitle breadcrumbs={processBreadCrumbs}>Ready</PageTitle>
            <Campaigns />
          </>
        }
      />
      <Route
        path='approved'
        element={
          <>
            <PageTitle breadcrumbs={processBreadCrumbs}>Approved</PageTitle>
            <Documents />
          </>
        }
      />
      <Route
        path='rejected'
        element={
          <>
            <PageTitle breadcrumbs={processBreadCrumbs}>Rejected</PageTitle>
            <Connections />
          </>
        }
      />
      <Route index element={<Navigate to='/loan/pages/profile/started' />} />
    </Route>
  </Routes>
)

export default ProcessPage