import { useTheme } from "@hooks/useTheme";
import { getBorderRadius } from "@utils/getBorderRadius";
import { MIcon } from "./MIcon";

export const SelectTokenButton = ({
	onClick,
}: {
	onClick: () => void;
}) => {
	const theme = useTheme();
	return (
		<button
			className="bn-bg-layer-3 bn-p-2 bn-text-primary bn-font-medium bn-text-base bn-aeonik-font bn-flex bn-items-center bn-cursor-pointer bn-whitespace-nowrap bn-border-none hover:bn-bg-layer-1"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 32) }}
			type="button"
			onClick={onClick}
		>
			Select Token
			<MIcon name="keyboard_arrow_down" classNames="bn-flex-shrink-0" />
		</button>
	);
};
