uldp.edu.vn/app/visa/components/Breadcrumb.tsx

const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";

interface BreadcrumbProps {
  title: string;
  breadcrumbItems: Array<{
    label: string;
    href?: string;
  }>;
  backgroundImage?: string;
  showShape?: boolean;
}

export default function Breadcrumb({
  title,
  breadcrumbItems,
  backgroundImage = `${ASSET_URL}/img/inner-page/breadcrumb.jpg`,
  showShape = true,
}: BreadcrumbProps) {
  return (
    <section
      className="breadcrumb-wrapper fix bg-cover"
      style={{
        backgroundImage: `url(${backgroundImage})`,
      }}
    >
      {showShape && (
        <div className="shape">
          <img src={`${ASSET_URL}/img/inner-page/shape.png`} alt="img" />
        </div>
      )}
      <div className="container">
        <div className="page-heading">
          <h1 className="breadcrumb-title">{title}</h1>
          <ul className="breadcrumb-list">
            {breadcrumbItems.map((item, index) => (
              <li key={index}>
                {item.href ? (
                  <a href={item.href}>{item.label}</a>
                ) : (
                  <>
                    {index > 0 && <i className="fa-solid fa-chevron-right"></i>}
                    {item.label}
                  </>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}