/**
 * Breadcrumbs component matching the Angular `page-breadcrumbs` component.
 *
 * Renders a simple breadcrumb trail. First item always links to the
 * main Aeroflot site. Additional items come from props.
 *
 * @module
 */

import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";
import "./Breadcrumbs.scss";

export interface BreadcrumbItem {
  label: string;
  url?: string;
}

export interface BreadcrumbsProps {
  items?: BreadcrumbItem[];
}

export const Breadcrumbs: FC<BreadcrumbsProps> = ({ items = [] }) => {
  const { t } = useTranslation();

  const allItems: BreadcrumbItem[] = [
    { label: t("SHARED.MAIN"), url: "https://www.aeroflot.ru" },
    ...items,
  ];

  return (
    <nav className="breadcrumbs" aria-label="breadcrumb" data-testid="breadcrumbs">
      <ol className="breadcrumbs__list">
        {allItems.map((item, index) => (
          <li
            key={`${item.label}-${index}`}
            className={`breadcrumbs__item${index === allItems.length - 1 ? " breadcrumbs__item--active" : ""}`}
          >
            {item.url && index < allItems.length - 1 ? (
              <a href={item.url} className="breadcrumbs__link">{item.label}</a>
            ) : (
              <span className="breadcrumbs__text">{item.label}</span>
            )}
            {index < allItems.length - 1 && (
              <span className="breadcrumbs__separator">&gt;</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
};
