import { ControlButton } from "components/pages/Stream/ControlButton/ControlButton";
import { MicroButton } from "components/pages/Stream/MicroButton/MicroButton";
import { ShareButton } from "components/pages/Stream/ShareButton/ShareButton";
import { LanguageButton } from "components/pages/Stream/LanguageButton/LanguageButton";
import { ExitButton } from "components/pages/Stream/ExitButton/ExitButton";

export const ControlPanel: React.FC<any> = ({
  handleOpenSharePopup,
  handleOpenExitPopup,
  handleMuteClick,
  isMuted,
  isSidebarWide
}) => {
  
  return (
    <div className="toolbar-field-part">
      <div className="toolbar-button-container-border-line"></div>
      <ControlButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></ControlButton>
      <MicroButton isSidebarWide={isSidebarWide} isMuted={isMuted} onClick={handleMuteClick}></MicroButton>
      <div className="toolbar-button-container-border-line"></div>
      <ShareButton isSidebarWide={isSidebarWide} onClick={handleOpenSharePopup}></ShareButton>
      <LanguageButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></LanguageButton>
      <div className="toolbar-button-container-border-line"></div>
      <ExitButton isSidebarWide={isSidebarWide} onClick={handleOpenExitPopup}></ExitButton>
    </div>
  );
};
