import type { PortfolioLayout2Content } from "@/data/portfolio-layout2";
import DataLink from "@/components/common/DataLink";
import { Fragment } from "react";

export default function Layout2PageBanner({
  data,
}: {
  data: PortfolioLayout2Content["pageBanner"];
}) {
  return (
    <div className="page-banner">
      <div className="carousel-container">
        <div className="page-info">
          <div className="page-content v7">
            <h1
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={data.titleAosDelay}
            >
              {data.title}
            </h1>
            <ul
              className="bread-crumbs mb-0"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={data.breadcrumbsAosDelay}
            >
              {data.breadcrumbs.map((item, index) => (
                <Fragment key={item.id}>
                  {index > 0 ? <li className="dot" /> : null}
                  <li>
                    {item.href ? (
                      <DataLink href={item.href} title="">
                        {item.label}
                      </DataLink>
                    ) : (
                      item.label
                    )}
                  </li>
                </Fragment>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}