import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { BreadcrumbTrail } from "./BreadcrumbTrail";

type AccountBreadcrumbsProps = {
	accountId: string;
	section?: "events" | "income" | "operations";
};

const AccountBreadcrumbs: FC<AccountBreadcrumbsProps> = (props) => {
	const { accountId, section } = props;
	const { data: accounts } = useBrokerageAccounts();
	const { t } = useTranslation();
	const accountName =
		accountId === "all"
			? t("accounts.all")
			: (accounts?.find((account) => account.id === accountId)?.name ??
				t("breadcrumbs.accountFallback"));
	const accountPath = `/accounts/${accountId}`;
	const items = [
		{ label: t("breadcrumbs.accounts"), to: "/accounts" },
		section ? { label: accountName, to: accountPath } : { label: accountName },
		...(section ? [{ label: t(`breadcrumbs.${section}`) }] : []),
	];

	return <BreadcrumbTrail items={items} />;
};

export { AccountBreadcrumbs };