import { Link } from 'react-router-dom'

export default function Breadcrumb({ title, items = [], bgImage }) {
  return (
    <div className="breadcumb-banner">
      <div
        className="breadcumb-wrapper"
        id="breadcumbwrap"
        style={{
          backgroundImage: `url(${bgImage || '/assets/images/breadcumb-bg.jpg'})`,
          backgroundPosition: 'center center',
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'cover'
        }}
      >
        <div className="container">
          <div className="breadcumb-content">
            <h1 className="breadcumb-title">{title}</h1>
            <ul className="breadcumb-menu">
              {items.map((item, i) => (
                <li key={i}>
                  {item.link ? <Link to={item.link}>{item.label}</Link> : item.label}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}