import { useEffect, useRef, useState } from "react";
import MuteIcon from "@/components/icons/MuteIcon";
import UnmutedIcon from "@/components/icons/UnmutedIcon";

export function VideoMutingBtn({
  handleClick,
  muted,
}: {
  muted: boolean;
  handleClick: () => void;
}) {
  const ref = useRef<HTMLDivElement>(null);

  const [point, setPoint] = useState([0, 0]);

  useEffect(() => {
    const el = ref.current;
    const move = (e: MouseEvent) => setPoint([e.clientX, e.clientY]);
    el?.addEventListener("mousemove", move);

    return () => {
      el?.removeEventListener("mousemove", move);
    };
  }, []);

  return (
    <div className="absolute left-0 top-0 h-[calc(5/6*100%)] w-full z-[7]">
      <div ref={ref} className="group relative w-full h-full">
        <button
          type="button"
          className="bg-[#37393B99] p-[1.736vw] [backdrop-filter:blur(30.72px)] rounded-full group-hover:opacity-100 transition-opacity group-hover:cursor-none opacity-0 sticky outline-none"
          style={{ left: point[0] - 32, top: point[1] - 32 }}
          onClick={handleClick}
        >
          {muted ? (
            <div className="text-white lg:size-[1.944vw] size-7">
              <UnmutedIcon />
            </div>
          ) : (
            <div className="text-white lg:size-[1.944vw] size-7">
              <MuteIcon />
            </div>
          )}
        </button>
      </div>
    </div>
  );
}
