import clsx from "clsx";
import { NetworkOption } from "../ConnectedMain/NetworkPopup";

interface PropsType {
  className?: string;
  selectedNetwork: NetworkOption;
  onClick?: () => void;
}

const NetworkSwitcher = ({
  className = "",
  selectedNetwork,
  onClick,
}: PropsType) => {
  const { name, logo } = selectedNetwork;
  return (
    <div
      className={clsx(
        className,
        "uikit-shrink-0  uikit-h-10 uikit-flex uikit-items-center uikit-px-[10px] uikit-cursor-pointer uikit-border uikit-border-border uikit-border-solid uikit-rounded-lg hover:uikit-opacity-50 uikit-box-border",
      )}
      onClick={onClick}
    >
      {typeof logo === "string" ? (
        <img
          alt={`tomo ${name}`}
          src={logo}
          className={"uikit-size-6 uikit-rounded-full"}
        />
      ) : (
        logo
      )}
      <div className="uikit-w-16 uikit-font-medium uikit-text-t1 uikit-font-switzer uikit-truncate uikit-text-sm uikit-ml-2 uikit-mr-1">
        {name}
      </div>
      <ArrowRight className="uikit-shrink-0 uikit-text-primary" />
    </div>
  );
};

export default NetworkSwitcher;

const ArrowRight = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
      {...props}
    >
      <path
        d="M7.68335 6.99959L4.79597 4.11227L5.62092 3.28732L9.33325 6.99959L5.62092 10.7119L4.79597 9.88696L7.68335 6.99959Z"
        fill="currentColor"
      />
    </svg>
  );
};