openmonetis/components/shared/money-values.tsx

"use client";

import { usePrivacyMode } from "@/components/providers/privacy-provider";
import { formatCurrency } from "@/lib/utils/currency";
import { cn } from "@/lib/utils/ui";

type Props = {
	amount: number;
	className?: string;
	showPositiveSign?: boolean;
};

function MoneyValues({ amount, className, showPositiveSign = false }: Props) {
	const { privacyMode } = usePrivacyMode();
	const formattedValue = formatCurrency(amount);

	const displayValue =
		showPositiveSign && amount > 0 ? `+${formattedValue}` : formattedValue;

	return (
		<span
			style={{ fontFamily: "var(--font-money)" }}
			className={cn(
				"inline-flex items-baseline transition-all duration-200 tracking-tighter",
				privacyMode &&
					"blur-[6px] select-none hover:blur-none focus-within:blur-none",
				className,
			)}
			aria-label={privacyMode ? "Valor oculto" : displayValue}
			data-privacy={privacyMode ? "hidden" : undefined}
			title={
				privacyMode ? "Valor oculto - passe o mouse para revelar" : undefined
			}
		>
			{displayValue}
		</span>
	);
}

export default MoneyValues;