export const Amount = ({
	amount,
	setAmount,
}: {
	amount: string;
	setAmount: (value: string) => void;
}) => {
	const onUserInput = (value: string) => {
		if (value.match("^[0-9]*[.,]?[0-9]*$")) {
			// Using dot as decimal separator irrespective of the locale used
			// Bungee relies on . for decimal operations
			setAmount(value.replace(/,/g, "."));
		}
	};

	return (
		<div className="bn-w-full">
			<input
				type="text"
				onChange={(e) => onUserInput(e.currentTarget.value)}
				value={amount}
				className="bn-text-primary bn-border-none bn-bg-transparent bn-outline-none bn-text-[22px] bn-font-medium bn-aeonik-font bn-w-full bn-text-ellipsis"
				placeholder="0.00"
				inputMode="decimal"
				disabled={!setAmount}
				spellCheck={false}
				onWheel={(e) => (document.activeElement as HTMLElement).blur()}
				id="bn-amount"
				pattern="^[0-9]*[.,]?[0-9]*$"
				autoComplete="off"
			/>
		</div>
	);
};
