import React from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import { Container } from '@chakra-ui/react'

import { URLs } from './__data__/urls'

import { NotFound } from './pages/not-found'
import { ByPage } from './pages/by'
import { Friends } from './pages/friends'

export const Dashboard = () => {
  return (
    <Routes>
      <Route
        path={URLs.baseUrl}
        // element={<Navigate replace to={URLs.toNotFound.url} />}
        element={<Friends />}
      />
      <Route path={URLs.by.url} element={<Container maxW="container.xl"><ByPage /></Container>} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}