import React from 'react'
import { useLocation } from 'react-router-dom'

import routes from '../routes'

import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'

const AppBreadcrumb = () => {
  const currentLocation = useLocation().pathname

  const getRouteName = (pathname, routes) => {
    const currentRoute = routes.find((route) => route.path === pathname)
    return currentRoute.name
  }

  const getBreadcrumbs = (location) => {
    const breadcrumbs = []
    location.split('/').reduce((prev, curr, index, array) => {
      const currentPathname = `${prev}/${curr}`
      breadcrumbs.push({
        pathname: currentPathname,
        name: getRouteName(currentPathname, routes),
        active: index + 1 === array.length ? true : false,
      })
      return currentPathname
    })
    return breadcrumbs
  }

  const breadcrumbs = getBreadcrumbs(currentLocation)

  return (
    <CBreadcrumb className="m-0 ms-2">
      <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
      {breadcrumbs.map((breadcrumb, index) => {
        return (
          <CBreadcrumbItem
            {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
            key={index}
          >
            {breadcrumb.name}
          </CBreadcrumbItem>
        )
      })}
    </CBreadcrumb>
  )
}

export default React.memo(AppBreadcrumb)

@@ -384,20 +384,43 @@
 entRoute
-.nam
+ ? currentRoute.name : fals
 e%0A  %7D%0A%0A 
@@ -597,16 +597,99 @@
 %7Bcurr%7D%60%0A
+      const routeName = getRouteName(currentPathname, routes)%0A      routeName &&%0A  
       br
@@ -705,16 +705,18 @@
 .push(%7B%0A
+  
         
@@ -754,26 +754,25 @@
     
+  
 name: 
-getR
+r
 outeName
 (cur
@@ -771,35 +771,12 @@
 Name
-(currentPathname, routes)
 ,%0A
+  
     
@@ -830,16 +830,18 @@
  false,%0A
+  
       %7D)

add support for dynamic paths