import styles from "./DetailBanner.module.css";

export default function DetailBanner({
  title,
  breadcrumbs,
}: {
  title: string;
  breadcrumbs: string[];
}) {
  return (
    <section className={styles.bannerWrap}>
      <div className={styles.banner}>
        <h1 className={styles.bannerTitle}>{title}</h1>
        <nav className={styles.crumbs} aria-label="Breadcrumb">
          {breadcrumbs.map((crumb, index) => (
            <span key={`${crumb}-${index}`}>
              {index > 0 ? (
                <img
                  className={styles.crumbChevron}
                  src="/images/icons/chevron.svg"
                  alt=""
                />
              ) : null}
              <span
                className={
                  index === breadcrumbs.length - 1 ? styles.crumbActive : undefined
                }
              >
                {crumb}
              </span>
            </span>
          ))}
        </nav>
      </div>
    </section>
  );
}