import { History } from "@components/History";
import { Trans } from "@lingui/macro";
import { motion } from "framer-motion";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useAccount } from "wagmi";
import { setSenderAddress } from "../../store/quoteParamSlice";
import { Settings } from "../Settings";

export const Header = () => {
	const dispatch = useDispatch();

	const { address } = useAccount();

	useEffect(() => {
		dispatch(setSenderAddress(address));
	}, [address, dispatch]);

	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">
				<History />
				<Settings />
			</div>
		</motion.div>
	);
};
