import { CloseIcon, HelpIcon } from "@src/assets/icons";
import { Tooltip } from "@src/components/Tooltip/index";
import { useRef } from "react";

type Props = {
  onCloseClick: () => void;
};

export const Header = ({ onCloseClick }: Props) => {
  const tooltipTriggerRef = useRef<SVGSVGElement>(null);

  return (
    <div className="flex justify-between items-center text-base font-medium">
      <div className="text-t_text_primary">Confirmation</div>
      <div className="flex gap-4 items-center">
        <Tooltip
          text="To sign the transaction open the wallet you have used to connect with XSwap."
          position="BOTTOM"
          triggerRef={tooltipTriggerRef}
          id="connect-wallet-to-sign-tx-tooltip"
        />

        <HelpIcon
          ref={tooltipTriggerRef}
          className="cursor-help fill-t_main_accent_light w-[18px] h-[18px]"
        />

        <div
          className="w-4 h-4 fill-t_text_primary cursor-pointer"
          onClick={onCloseClick}
        >
          <CloseIcon />
        </div>
      </div>
    </div>
  );
};