import {
  CloseIcon,
  HistoryGradientBgIcon,
  SettingsGradientBgIcon,
} from "@src/assets/icons";
import { useSwapContext } from "@src/context";

type Props = {
  onClose: () => void;
};
export const Controls = ({ onClose }: Props) => {
  const { tab, setTab, overlay } = useSwapContext();

  return (
    <div className="flex gap-5 items-center">
      {tab === "Swap" ? (
        <>
          <button
            type="button"
            onClick={() => setTab("Settings")}
            aria-label="Open settings"
            className="fill-white"
          >
            <SettingsGradientBgIcon />
          </button>
          <button
            type="button"
            onClick={() => setTab("History")}
            aria-label="Open history"
            className="fill-white"
          >
            <HistoryGradientBgIcon />
          </button>
          {overlay && (
            <button
              type="button"
              onClick={() => onClose()}
              aria-label="Close"
              className="fill-t_text_primary"
            >
              <CloseIcon />
            </button>
          )}
        </>
      ) : (
        <button
          type="button"
          onClick={() => {
            setTab("Swap");
          }}
          aria-label="Switch to swap view"
          className="fill-t_text_primary"
        >
          <CloseIcon />
        </button>
      )}
    </div>
  );
};