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

export default function Layout3PageBanner({
  data,
}: {
  data: PortfolioLayout3Content["pageBanner"];
}) {
  const { aos } = data;

  return (
    <div className="page-banner">
      <div className="carousel-container">
        <div className="page-info">
          <div className="page-content">
            <ul
              className="bread-crumbs"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={aos.breadcrumbsDelay}
            >
              {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>
            <h1
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={aos.titleDelay}
            >
              {data.title}
            </h1>
            <p
              data-aos="fade-up"
              data-aos-duration={aos.introDuration}
              data-aos-delay={aos.introDelay}
            >
              {data.intro}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}