/**
 * @fileoverview React component for ResizeHandle.jsx
 * 
 * @module components.game.ResizeHandle
 */


import { PanelResizeHandle } from "react-resizable-panels";
import PropTypes from "prop-types";

export default function ResizeHandle({
  direction = "horizontal",
  // English alias
  orientation,
  theme = "light",
  disabled = false,
}) {
  const effectiveDirection = direction ?? orientation ?? "horizontal";
  const horizontal = effectiveDirection === "horizontal";
  const dark = theme === "dark";



  return (
    <PanelResizeHandle
      disabled={disabled}
      className={`
        group
        ${horizontal ? "w-3" : "h-3"}
        ${disabled ? "cursor-default" : horizontal ? "cursor-col-resize" : "cursor-row-resize"}
        flex items-center justify-center
        ${dark ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"}
        transition-colors
      `}
    >
      <div
        className={`
          flex ${horizontal ? "flex-col space-y-1" : "flex-row space-x-1"}
          items-center justify-center
        `}
      >
        <span
          className={`block w-1 h-1 rounded-full ${dark ? "bg-gray-400 group-hover:bg-gray-300" : "bg-gray-500 group-hover:bg-gray-700"}`}
        />
        <span
          className={`block w-1 h-1 rounded-full ${dark ? "bg-gray-400 group-hover:bg-gray-300" : "bg-gray-500 group-hover:bg-gray-700"}`}
        />
        <span
          className={`block w-1 h-1 rounded-full ${dark ? "bg-gray-400 group-hover:bg-gray-300" : "bg-gray-500 group-hover:bg-gray-700"}`}
        />
      </div>
    </PanelResizeHandle>
  );
}

ResizeHandle.propTypes = {
  direction: PropTypes.string,
  orientation: PropTypes.string,
  theme: PropTypes.string,
  disabled: PropTypes.bool,
};
