import { HelpIcon } from "@src/assets/icons";
import { ToggleButton } from "@src/components/ToggleButton";
import { Tooltip } from "@src/components/Tooltip";
import { useSwapContext } from "@src/context";
import { useRef } from "react";

export const InfiniteApproval = () => {
  const tooltipTriggerRef = useRef<SVGSVGElement>(null);
  const { infiniteApproval, setInfiniteApproval } = useSwapContext();

  return (
    <div className="flex flex-col gap-5 pt-5 border-t border-solid border-white border-opacity-10">
      <h1 className="text-sm font-medium text-left">Approval</h1>
      <div className="flex gap-2 items-center justify-between flex-wrap">
        <div className="flex items-center">
          <h2 className="text-xs">Infinite approval: </h2>
          <ToggleButton
            checked={infiniteApproval}
            onClick={() => {
              setInfiniteApproval((x) => !x);
            }}
          />
          <Tooltip
            text={
              "Enabling infinite approval allows to access your tokens without requiring repeated approvals for each transaction. This streamlines multiple transactions but may pose a security risk if the spender's address is compromised."
            }
            position="BOTTOM"
            triggerRef={tooltipTriggerRef}
            id="infinite-approval-tooltip"
          />
          <HelpIcon
            ref={tooltipTriggerRef}
            className="cursor-help fill-t_main_accent_light w-[18px] h-[18px]"
          />
        </div>
      </div>
    </div>
  );
};