import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { formatMoney, instrumentLogoUrl } from "@/shared/lib";
import { EntryCard } from "@/shared/ui";
import type { BrokerageEvent } from "../api/useBrokerageEvents";

type BrokerageEventCardProps = { event: BrokerageEvent };

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

	const date = new Intl.DateTimeFormat("ru-RU", {
		dateStyle: "medium",
		timeZone: "UTC",
	}).format(new Date(`${event.date}T00:00:00Z`));

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

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

export { BrokerageEventCard };