import styles from "./styles.module.css";
import CogSelectedIcon from "../../assets/cog_selected.svg";
import MartySelectedIcon from "../../assets/marty_selected.svg";
import { ReactComponent as ConnectButtonDefault } from "../../assets/connection/connect_btn-default.svg";
import { RaftTypeE } from "@robotical/webapp-types/dist-types/src/types/raft";

interface ConnectButtonProps {
  onConnect: () => void;
  raftType: RaftTypeE;
}

export default function ConnectButton({ onConnect, raftType }: ConnectButtonProps) {
  return <div className={styles.connectButton} onClick={onConnect}>
    <div className={styles.emptyRow}></div>
    <div className={styles.connectButtonIconContainer}>
      {raftType === RaftTypeE.COG ?
        <img src={CogSelectedIcon} alt="Cog icon" className={styles.connectButtonIcon} /> :
        <img src={MartySelectedIcon} alt="Marty icon" className={styles.connectButtonIcon} />
      }
    </div>
    <div className={[styles.connectIconContainer].join(" ")}>
      <ConnectButtonDefault />
    </div>
  </div>
}