import React from "react";
import { useSelector } from "react-redux";

import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { useTheme } from "../../hooks/useTheme";
import { getBorderRadius } from "../../utils/getBorderRadius";

export const Balance = ({
	balance,
	setMax,
}: { balance?: string; setMax?: () => void }) => {
	const theme = useTheme();
	const locale = useSelector((state: ReduxStateType) => state.settings.language);

	if (!balance) return null;
	return (
		<div className="bn-text-sm bn-text-secondary bn-flex bn-items-center bn-ml-auto bn-aeonik-font">
			<p>
				Bal:{" "}
				<span className="bn-text-primary">{adjustDecimals(balance, 3, locale)}</span>
			</p>
			{setMax && (
				<button
					type="button"
					className="bn-bg-accent bn-border-none bn-px-[5px] bn-py-[3px] bn-ml-1 bn-cursor-pointer bn-text-accent"
					onClick={setMax}
					style={{ borderRadius: getBorderRadius(theme.borderRadius, 2) }}
				>
					MAX
				</button>
			)}
		</div>
	);
};
