import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
import { EntryCard } from "@/shared/ui";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import { paymentPresentation } from "../model/display";

type LedgerEntryRowProps = {
	operation: BrokerageOperation;
};

const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
	const { operation } = props;
	const { t } = useTranslation();
	const instrument =
		operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
	const payment = paymentPresentation(operation);
	const metadata = [formatSnapshotTime(operation.occurredAt), instrument].join(
		" · ",
	);

	return (
		<EntryCard
			title={operation.description || operation.type}
			metadata={metadata}
			initial={(instrument.trim()[0] ?? "?").toUpperCase()}
			imageSrc={instrumentLogoUrl(operation.logoName)}
			value={payment.amount}
			valueLabel={t(payment.label)}
			tone={payment.tone}
		/>
	);
};

export { LedgerEntryRow };