import { _ } from "@/lib/translation"

import Breadcrumb from "./Breadcrumb"
import BreadcrumbsWithLink from "./BreadcrumbWithLink"

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

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

export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
  return (
    <nav className={styles.breadcrumbs}>
      <ul className={styles.list}>
        <BreadcrumbsWithLink href="#">{_("Home")}</BreadcrumbsWithLink>
        {breadcrumbs.map((breadcrumb) => {
          if (breadcrumb.href) {
            return (
              <BreadcrumbsWithLink
                key={breadcrumb.title}
                href={breadcrumb.href}
              >
                {breadcrumb.title}
              </BreadcrumbsWithLink>
            )
          }

          return <Breadcrumb>{breadcrumb.title}</Breadcrumb>
        })}
      </ul>
    </nav>
  )
}
