import React from 'react'
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
import { TiHomeOutline } from 'react-icons/ti'
import siteLinks from '../../links/siteLinks'
import { Link } from 'react-router-dom'

export default function BreadcrumbComBS({title='Home', paths=[]}) {
  return (
    <>
        <div className="row">
            <div className="col-md-12 m-b-30">
                <div className="d-block d-sm-flex flex-nowrap align-items-center">
                    <div className="page-title mb-2 mb-sm-0">
                        <h1>{title}</h1>
                    </div>
                    <div className="ml-auto d-flex align-items-center">
                        <nav>
                            <ol className="breadcrumb gap-1 align-items-center p-0 m-b-0">
                                <Link to={siteLinks.dash}><TiHomeOutline /></Link>
                                {paths.map((item, index) => (
                                    <li key={index} className={`d-flex align-items-center gap-1 ${index + 1 == paths.length ? 'active text-primary' : ''}`}>
                                        <MdKeyboardDoubleArrowRight />
                                        {item}
                                    </li>
                                ))}
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </>
  )
}
