import Link from 'next/link';
import React from 'react'


const Breadcrumb = ({breadcrumbData}) => {
  return (
    <>
        <section className='breadcrumb-section'>
                <div className='custom_container'>
                    <div className='row'>
                        <div className='col'>
                             <nav aria-label="Breadcrumb" className="breadcrumb" role="navigation">
                                <ol>
                                    {breadcrumbData.map((it, idx) => {
                                    const isLast = idx === breadcrumbData?.length - 1;
                                    return (
                                       <li key={idx} className="breadcrumb-item">
                                            {isLast || !it.href ? (
                                            <span>{it.label}</span>
                                            ) : (
                                            <Link href={it.href}>{it.label}</Link>
                                            )}

                                            {/* slash separator */}
                                            {!isLast && <span className="breadcrumb-separator"> </span>}
                                        </li>
                                    );
                                    })}
                                </ol>
                                </nav>
                        </div>
                    </div>
                </div>
        </section>
    </>
  )
}

export default Breadcrumb