import "./Sidebar.css";
import React, { useEffect, useState } from "react";

import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop";
import { SidebarMobile } from "../SidebarMobile/SidebarMobile";


export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heightDevice }) => {
  const [isMuted, setMuted] = useState(true);
  const [isControl, setControl] = useState(false);
  const [height, setHeight] = useState(heightDevice);




  console.log(isMobile);

  const handleMuteClick = () => {
    setMuted((prev) => !prev);
  };

  const handleControlClick = () => {
    setControl((prev) => !prev);
  };

  return (
    <>
      {isMobile ? (
        <SidebarMobile
          height={height}
          isMuted={isMuted}
          isControl={isControl}
          handleMuteClick={handleMuteClick}
          handleControlClick={handleControlClick}
          closeStream={closeStream}
        ></SidebarMobile>
      ) : (
        <SidebarDesktop
          isMuted={isMuted}
          isControl={isControl}
          handleMuteClick={handleMuteClick}
          handleControlClick={handleControlClick}
          closeStream={closeStream}
          exitPopup={exitPopup}
        ></SidebarDesktop>
      )}
    </>
  );
};