import type { RouteDetails } from "@/types/index";
import { DoubleChevronRight } from "@components/common/Icons";
import { TokenIcon } from "@components/common/TokenIcon";
import { Tooltip } from "@components/common/Tooltip";

export const RouteProtocol = ({
	routeDetails,
	expand = false,
}: { routeDetails?: RouteDetails; expand?: boolean }) => {
	const dexDetails = routeDetails?.dexDetails;
	if (!routeDetails) return undefined;

	return (
		<div className="bn-flex-nowrap bn-flex bn-items-center">
			<div className="bn-flex bn-items-center bn-space-x-1">
				{/* dex detail */}
				{dexDetails ? (
					<>
						<Tooltip content={dexDetails.protocol.displayName}>
							<TokenIcon url={dexDetails.protocol.icon} classNames="bn-w-4 bn-h-4" />
						</Tooltip>
						<DoubleChevronRight />
					</>
				) : (
					<></>
				)}

				{/* route detail */}
				<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>}
			</div>
		</div>
	);
};
