import { User } from "@lume/ark";
import { compactNumber } from "@lume/utils";
import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";

export function ActivityZap({ event }: { event: NDKEvent }) {
	const { t } = useTranslation();
	const invoice = zapInvoiceFromEvent(event);

	return (
		<Link
			to={`/activity/${event.id}`}
			className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
		>
			<User.Provider pubkey={event.pubkey}>
				<User.Root className="flex items-center justify-between">
					<div className="flex items-center gap-2">
						<User.Avatar className="size-8 rounded-lg shrink-0" />
						<div className="inline-flex items-center gap-1.5">
							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
							<p className="shrink-0">
								{t("activity.zap")} {compactNumber.format(invoice.amount)} sats
							</p>
						</div>
					</div>
					<User.Time
						time={event.created_at}
						className="text-neutral-500 dark:text-neutral-400"
					/>
				</User.Root>
			</User.Provider>
		</Link>
	);
}