import * as React from 'react';
import { useConnectionState } from '../../hooks';
import { ConnectionState } from '@cc-livekit/livekit-client';
import { Tooltip } from 'antd';

/** @public */
export interface EndCallButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  onClick?: () => void;
}

export const EndCallButton: (
  props: EndCallButtonProps & React.RefAttributes<HTMLButtonElement>,
) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, EndCallButtonProps>(
  function EndCallButton(props: EndCallButtonProps, ref) {
    const connectionState = useConnectionState();

    return (
      <Tooltip title="End Call for All">
        <button
          ref={ref}
          disabled={connectionState === ConnectionState.Disconnected}
          className="lk-end-call-button"
          onClick={props.onClick}
        >
          {props.children}
        </button>
      </Tooltip>
    );
  },
);
