import type { FC } from "react";

import { useTranslation } from "react-i18next";

import { useBankCard } from "@/entities/bank-card";

import { BreadcrumbTrail } from "./BreadcrumbTrail";

type CardBreadcrumbsProps = { identifier: string };

const CardBreadcrumbs: FC<CardBreadcrumbsProps> = (props) => {
	const { data } = useBankCard(props.identifier);
	const { t } = useTranslation();

	return (
		<BreadcrumbTrail
			items={[
				{ label: t("bank.title"), to: "/cards" },
				{ label: data?.name ?? t("bank.card") },
			]}
		/>
	);
};

export { CardBreadcrumbs };