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.uid} href={breadcrumb.href}>
                {breadcrumb.title}
              </BreadcrumbsWithLink>
            )
          }

          return (
            <Breadcrumb key={breadcrumb.uid}>{breadcrumb.title}</Breadcrumb>
          )
        })}
      </ul>
    </nav>
  )
}