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

import { useTheme } from "../../hooks/useTheme";
import { getBorderRadius } from "../../utils/getBorderRadius";
import { SocketIcon } from "../common/Icons";
import { RoundedCheckbox } from "../common/RoundedCheckbox";

export const RoutingTypeSetting = () => {
	const theme = useTheme();

	return (
		<div
			className="bn-bg-layer-2"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			<div className="bn-flex bn-items-center bn-justify-between bn-px-4 bn-py-2 bn-border-0 bn-border-b bn-border-solid bn-border-b-primary">
				<div className="bn-flex bn-items-center">
					<div className="bn-w-[30px] bn-h-[30px] bn-rounded-full bn-mr-2 bn-bg-layer-3 bn-flex bn-items-center bn-justify-center">
						<SocketIcon width="20" height="20" />
					</div>
					<p className="bn-text-base bn-text-primary bn-font-medium">
						<Trans>Bungee Auto</Trans>
					</p>
				</div>

				{/* disabled: only auto routing enabled on bungee lite */}
				<RoundedCheckbox
					disabled
					isChecked={true}
					setIsChecked={() => {}}
					id="bungee-auto-routing"
				/>
			</div>

			<p className="bn-px-4 bn-py-3 bn-text-secondary bn-text-xs bn-font-normal">
				<Trans>
					When Bungee Auto is available, gas fees will be zero and you get the best output
					price with fastest transaction time.
				</Trans>
			</p>
		</div>
	);
};
