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

export const Delivery = () => {
  const tooltipTriggerRef = useRef<SVGSVGElement>(null);
  const { expressDelivery, setExpressDelivery } = useSwapContext();

  return (
    <div className="flex flex-col gap-5 pt-5 border-t border-solid border-t_text_primary border-opacity-10">
      <h1 className="text-sm font-medium text-left">Delivery</h1>
      <div className="flex gap-2 items-center justify-between flex-wrap">
        <div className="flex items-center">
          <h2 className="text-xs">Express delivery: </h2>
          <ToggleButton
            checked={expressDelivery}
            onClick={() => {
              setExpressDelivery((x) => !x);
            }}
          />
          <Tooltip
            text={
              "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $1000 USD."
            }
            position="BOTTOM"
            triggerRef={tooltipTriggerRef}
            id="express-delivery-tooltip"
          />
          <HelpIcon
            ref={tooltipTriggerRef}
            className="cursor-help fill-t_main_accent_light w-[18px] h-[18px]"
          />
        </div>
        <div className="text-xs font-medium">
          <span className="text-xs font-medium opacity-60">{`Max time: `}</span>
          {expressDelivery ? "30 sec" : "30 min"}
        </div>
      </div>
    </div>
  );
};