import type { FC } from "react";

import { Breadcrumbs } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import classes from "./AppBreadcrumbs.module.css";

type BreadcrumbTrailProps = { items: Crumb[] };

type Crumb = { label: string; to?: string };

const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
	const { items } = props;
	const { t } = useTranslation();

	return (
		<Breadcrumbs
			aria-label={t("breadcrumbs.label")}
			className={classes.trail}
			component="nav"
			data-depth={items.length}
			separator={<span aria-hidden="true">→</span>}
		>
			{items.map(item =>
				item.to
					? (
							<Link className={classes.link} key={item.to} to={item.to}>
								{item.label}
							</Link>
						)
					: (
							<span aria-current="page" key={item.label}>
								{item.label}
							</span>
						),
			)}
		</Breadcrumbs>
	);
};

export { BreadcrumbTrail, type Crumb };