import Link from "next/link"

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}>
            <Link href={`/${parent.node.system.locale}${parent.node.url}`}>
              {parent.node.breadcrumbs?.title ?? parent.node.title}
            </Link>
          </li>
        ) : null}
        {breadcrumbs.edges.map((breadcrumb) => (
          <li
            className={styles.li}
            itemProp="breadcrumb"
            key={breadcrumb.node.title}
          >
            <Link className={styles.link} href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
              {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
            </Link>
          </li>
        ))}
        <li className={styles.currentPage}>
          <span>{title}</span>
        </li>
      </ul>
    </nav>
  )
}
