import { MIcon } from "@components/common/MIcon";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { SLOW_ROUTE_THRESHOLD } from "@utils/constants";
import { getTimeInMins } from "@utils/getTimeInMins";

export const SlowRouteWarning = () => {
	const { data: activeRoute } = useActiveRoute();
	const isSlowRoute =
		activeRoute?.estimatedFulfilTime &&
		activeRoute.estimatedFulfilTime >= SLOW_ROUTE_THRESHOLD;

	if (!isSlowRoute) return null;
	return (
		<div className="bn-text-sm bn-text-accent-4 bn-font-medium bn-bg-accent-4 bn-rounded-lg bn-px-2.5 bn-py-2 bn-flex bn-items-center bn-space-x-2 bn-mt-4 -bn-mb-2">
			<MIcon name="gpp_maybe" classNames="bn-text-lg" />
			<span>
				You've selected a very slow route ~{" "}
				{getTimeInMins(activeRoute?.estimatedFulfilTime).full}
			</span>
		</div>
	);
};
