import { CloseOutlined, ExpandOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

type RobotFrameProps = {
  onClose: () => void;
  visible: boolean;
};

function RobotFrame({ onClose, visible }: RobotFrameProps) {
  const url = 'http://172.20.32.185:30080/chat/EruwZfxVgDkWdLYs';
  const openUrl = () => {
    window.open(url, '_blank');
  };

  return (
    <div
      className={classNames(styles['robot-frame'], { [styles['robot-frame--visible']]: visible })}
    >
      <div className={styles['robot-frame__header']}>
        <Button icon={<ExpandOutlined />} type="text" onClick={openUrl}></Button>
        <Button icon={<CloseOutlined />} type="text" onClick={onClose}></Button>
      </div>
      <iframe className={styles['robot-frame__iframe']} src={url} allow="microphone"></iframe>
    </div>
  );
}

export default RobotFrame;
