import React from "react"
import  { ReactComponent as BreadcrumImage } from "./../assets/breadcrum.svg"

interface Props{
    path: string
    onDirClick?: (path: string) => void
}

const Breadcrum: React.FC<Props> = (props) => {
	const parts = props.path.split("/").filter(e=>e.length > 0)

	return (
		<ul className="flex text-gray-500 dark:text-gray-400  text-lg">
			<li className="inline-flex items-center cursor-pointer">
				<a onClick={()=>{
					props.onDirClick?.("/")
				}}>
					Root
				</a>
			</li>

			{parts.map((e,i,arr)=>{
				const last = i == arr.length - 1
				return <div key={e} className="inline-flex items-center cursor-pointer">
					<BreadcrumImage />
					<li>
						<a 
							className={`${last?"text-blue-500":""}`}
							onClick={()=>{
								if (!last){
									props.onDirClick?.("/"+arr.slice(0,i-1).join("/"))
								}
							}}>{e}</a>
					</li>
				</div>
			})}
		</ul>

	)
}

export default Breadcrum