import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { usePageTitleState } from '../../zustand/PageTitleState'

const PageTitleComponent = () => {

    const {PageTitle,setPageTitle} = usePageTitleState()
    const navigate = useNavigate()
    const location = useLocation()
    const handleNavigate = (path:string)=>{
        const currentPath = location.pathname ; 
        const newPath = currentPath?.split(path)?.[0] + path ;
            if(newPath !== currentPath){
                navigate(newPath)
            }
    } 
  return (
    <div className='PageTitle'>
        {(Array.isArray(PageTitle) ? PageTitle : [])?.map((item,index)=>{
            return (
                <div key={index} className='PageTitleItems' onClick={()=>handleNavigate(item?.path)}>
                        {item?.name}  /
                </div>
            )
        })}
    </div>
  )
}

export default PageTitleComponent