import styles from "./breadcrumbs.module.css"

import type { BreadcrumbsProps } from "@/types/components/current/breadcrumbs"

export default function Breadcrumbs({
  breadcrumbs,
  parent,
  title,
}: BreadcrumbsProps) {
  return (
    <nav className={styles.nav}>
      <ul className={styles.list}>
        {parent ? (
          <li className={styles.parent}>
            <a href={parent.href}>
              {parent.title}
            </a>
          </li>
        ) : null}
        {breadcrumbs.map((breadcrumb) => (
          <li
            className={styles.li}
            itemProp="breadcrumb"
            key={breadcrumb.href}
          >
            <a className={styles.link} href={breadcrumb.href}>
              {breadcrumb.title}
            </a>
          </li>
        ))}
        <li className={styles.currentPage}>
          <span>{title}</span>
        </li>
      </ul>
    </nav>
  )
}