import { motion } from "framer-motion";

import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { useTopRoutes } from "@hooks/apis/common/quote/useTopRoutes";
import { History } from "../History";
import { Settings } from "../Settings";
import { RefreshButton } from "../common/RefreshButton";

export const Header = () => {
	return (
		<motion.div layout className="bn-flex bn-justify-between bn-items-center">
			<p className="bn-text-primary bn-text-xl bn-font-semibold">Swap</p>

			<div className="bn-flex bn-items-center bn-space-x-2">
				<RefreshBtnWrapper />
				<History />
				<Settings />
			</div>
		</motion.div>
	);
};

const RefreshBtnWrapper = () => {
	const { data: activeRoute } = useActiveRoute();
	const { refetch, isRefetchIntervalPaused } = useTopRoutes();
	if (!activeRoute) return null;

	return <RefreshButton onClick={refetch} isPaused={isRefetchIntervalPaused} />;
};
