import { ArrowsExchange } from "@src/assets/icons";
import { useSwapContext } from "@src/context";
import { FC } from "react";

export const ReorderButton: FC = () => {
  const {
    dstChain,
    dstToken,
    srcChain,
    srcToken,
    setDstChain,
    setDstToken,
    setSrcChain,
    setSrcToken,
  } = useSwapContext();

  const onReorderClick = () => {
    setDstChain(srcChain);
    setSrcChain(dstChain);
    setDstToken(srcToken);
    setSrcToken(dstToken);
  };

  return (
    <div className="h-[1px] w-full">
      <button
        onClick={onReorderClick}
        aria-label="Switch target token with the source token"
        className="absolute -translate-y-5 left-1/2 -translate-x-5 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary"
      >
        <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-lg">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
            <ArrowsExchange />
          </div>
        </div>
      </button>
    </div>
  );
};