import { useContext } from 'react';
import style from './index.module.css';
import CallPng from "/icons/call.png"
import { RealtimeClientContext } from '../Provider/RealtimeClientProvider';

interface IInvokeButtonProps extends React.HTMLAttributes<HTMLDivElement> {
  loading?: boolean;
  disable?: boolean;
}

export default function InvokeButton(props: IInvokeButtonProps) {
  const {disable, loading, className, ...rest } = props;

  const {isConnecting} = useContext(RealtimeClientContext);

  
  return (
    <div className={`${className} mt-auto mb-[80px]`} {...rest}>
      <div className={`mt-[20px] ${style.wrapper}`}>
        <img className={style.call} src={CallPng} alt="call" />
        <div className={style.text}>{disable ? '暂不可用':isConnecting?'连接中':'发起通话'}</div>
      </div>
    </div>
  );
}