import type { FC } from "react";

import { EntryCard } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib";

import type { BrokerageEvent } from "../api/useBrokerageEvents";

type BrokerageEventCardProps = { event: BrokerageEvent };

const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => {
	const { event } = props;
	const { t } = useTranslation();

	const date = formatDate(event.date);

	const metadata = [
		date,
		event.dateKind === "registry"
			? t("events.dateKind.registry")
			: null,
		event.isin,
		event.account?.name,
	]
		.filter(Boolean)
		.join(" · ");

	const projectedAmount = event.projectedAmount
		? formatMoney(event.projectedAmount)
		: t("events.noAmount");

	return (
		<EntryCard
			imageSrc={instrumentLogoUrl(event.logoName)}
			initial={(
				(event.ticker ?? event.displayName).trim()[0] ?? "?"
			).toUpperCase()}
			metadata={metadata}
			title={[t(`events.type.${event.type}`), event.displayName].join(" · ")}
			tone="neutral"
			value={projectedAmount}
			valueLabel={t("events.projectedAmount")}
		/>
	);
};

export { BrokerageEventCard };