import { Trans } from "@lingui/react/macro";
import { motion } from "framer-motion";

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

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">
				<Trans>Swap</Trans>
			</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 } = useFetchQuotes();
	if (!activeRoute || !refetch) return null;

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