import type { Protocol } from "@/types/index";
import { TokenIcon } from "@components/common/TokenIcon";
import { Tooltip } from "@components/common/Tooltip";

export const RouteProtocol = ({
	routeDetails,
	expand = false,
}: { routeDetails?: Protocol; expand?: boolean }) => {
	return (
		<div className="bn-flex-nowrap bn-flex bn-items-center">
			{routeDetails ? (
				<>
					<Tooltip content={routeDetails.name}>
						<TokenIcon url={routeDetails.logoURI} classNames="bn-w-4 bn-h-4" />
					</Tooltip>
					{expand && <span className="bn-pl-1">{routeDetails.name}</span>}
				</>
			) : (
				<>
					{/* <BungeeIcon /> */}
					<span className="bn-text-theme bn-text-sm">{!routeDetails && "Auto"}</span>
				</>
			)}
		</div>
	);
};
