import microOn from "images/icons/MicroOn.svg";
import microOff from "images/icons/MicroOff.svg";

import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";

import { Button } from "components/shared/Button/Button";

export const MicroButton: React.FC<any> = ({
  onClick,
  isMuted,
  isSidebarWide,
}) => {
  const { t } = useTranslation();
  const [button, setButton] = useState({
    icon: microOn,
    active: "mute-control-btn",
    inactive: "mute-control-btn-disable",
    type: "microphone",
  });

  const [active, setActive] = useState(false);

  useEffect(() => {
    setButton({ ...button, icon: active ? microOn : microOff });
  }, [active]);

  function handleClick() {
    onClick();
    setActive((prev) => !prev);
  }

  return (
    <div
      tabIndex={-1}
      onClick={handleClick}
      className="toolbar-button-area"
    >
      <Button
        isSidebarWide={isSidebarWide}
        button={button}
        active={isMuted}
      ></Button>
    </div>
  );
};
