import { useState } from "react";
import Exit from "../../../assets/images/exit.svg";
import NetworkPopup, { NetworkOption } from "../ConnectedMain/NetworkPopup";
import NetworkSwitcher from "./NetworkSwitcher";

interface PropsType {
  className?: string;
  selectedNetwork: NetworkOption;
  networkOptions: NetworkOption[];
  onNetworkSwitch: () => void;
  onLogout: () => void;
}

const ConnectedHeader = ({
  selectedNetwork,
  networkOptions,
  onLogout,
}: PropsType) => {
  const [opened, setOpened] = useState(false);
  const onClose = () => {
    setOpened(false);
  };
  return (
    <div className="uikit-flex uikit-items-center uikit-gap-2 uikit-pt-4 uikit-pb-3">
      <NetworkSwitcher
        selectedNetwork={selectedNetwork}
        onClick={() => {
          setOpened(true);
        }}
      />

      <div
        onClick={onLogout}
        className="uikit-flex uikit-w-10 uikit-h-10 uikit-items-center uikit-justify-center uikit-rounded-lg uikit-border uikit-border-border uikit-border-solid uikit-box-border uikit-cursor-pointer hover:uikit-opacity-50"
      >
        <img className="uikit-w-4 uikit-h-4" src={Exit} alt="" />
      </div>

      <NetworkPopup
        opened={opened}
        selectedNetwork={selectedNetwork}
        networkOptions={networkOptions}
        onClose={onClose}
        onBack={onClose}
        back
        fixed={false}
      />
    </div>
  );
};

export default ConnectedHeader;