"use client";

import React from "react";
import Link from "next/link";
import Image from "next/image";

interface Breadcrumbitems {
  name: string,
  url?: string
}


interface PageBannerProps {
  pageTitle: string;
  Breadcrumbitems: Breadcrumbitems[]
}

const Breadcrumb: React.FC<PageBannerProps> = ({
  pageTitle,
  Breadcrumbitems
}) => {
  return (
    <>
      <div className="page-title-area">
        <div className="container">
          <div className="page-title-content">
            <h2>{pageTitle}</h2>
            <ul>
              {Breadcrumbitems.map((item: Breadcrumbitems, index: number) => (
                <li key={index}>
                  {item.url ? <Link href={item.url}>{item.name}</Link> : <span>{item.name}</span>}
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="shape-img2">
          <Image
            src="/img/shape/shape2.png"
            alt="image"
            width={202}
            height={202}
          />
        </div>
        <div className="shape-img3">
          <Image
            src="/img/shape/shape3.png"
            alt="image"
            width={182}
            height={146}
          />
        </div>
      </div>
    </>
  );
};

export default Breadcrumb;