import type { RouteDetails } from "@/types/index";
import { getTimeInMins } from "../../utils/getTimeInMins";
import { twMerge } from "../../utils/tailwindMerge";
import { BungeeIcon, type IconProps } from "./Icons";
import { TokenIcon } from "./TokenIcon";

export const TransferType = ({
	type = "auto",
	time,
	classNames,
	iconProps,
	protocol,
}: {
	type?: "auto" | "manual";
	time?: number;
	classNames?: string;
	iconProps?: IconProps;
	protocol?: RouteDetails;
}) => {
	const style = twMerge("bn-text-sm bn-flex bn-items-center", classNames);

	const isManualRoute = type === "manual";
	return (
		<div className={style}>
			{isManualRoute ? (
				<TokenIcon url={protocol?.logoURI || ""} classNames="bn-size-4" />
			) : (
				<BungeeIcon {...iconProps} />
			)}
			<div className="bn-ml-1.5">
				<span className="bn-font-semibold bn-text-primary">
					{isManualRoute ? protocol?.name : "Auto"}
				</span>{" "}
				{/* @todo: show 30 seconds for swaps */}
				{time && (
					<span className="bn-text-secondary">~ {getTimeInMins(time).full}</span>
				)}
			</div>
		</div>
	);
};
