import React, { useState } from "react";
import "./SizeChanger.scss";
import { SizeChangerProps } from "./SizeChangerProps";

const SizeChanger = ({ left, right }: SizeChangerProps) => {
  const [leftWidth, setLeftWidth] = useState(600); // Начальная ширина левого блока

  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault();

    const startX = e.clientX;

    const onMouseMove = (e: MouseEvent) => {
      const newWidth = leftWidth + e.clientX - startX;
      setLeftWidth(newWidth);
    };

    const onMouseUp = () => {
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
    };

    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
  };

  return (
    <div className="resizable-container">
      <div className="left-pane" style={{ width: `${leftWidth}px` }}>
        {right}
      </div>
      <div className="resizer" onMouseDown={handleMouseDown} />
      <div className="right-pane">{left}</div>
    </div>
  );
};

export default SizeChanger;