import { Trans } from "@lingui/react/macro";
import React from "react";

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

export const SelectTokenButton = ({
	onClick,
	isLoading = false,
}: { onClick: () => void; isLoading?: boolean }) => {
	const theme = useTheme();
	// biome-ignore format:
	const style = `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 ${isLoading ? 'bn-animate-pulse' :''}`
	return (
		<button
			className={style}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 32) }}
			type="button"
			onClick={onClick}
			disabled={isLoading}
		>
			{isLoading ? <Trans>loading</Trans> : <Trans>Select Token</Trans>}
			<MIcon name="keyboard_arrow_down" classNames="bn-flex-shrink-0" />
		</button>
	);
};
