Split handle

"use client";

import { type ReactNode } from "react";
import { cn } from "../lib/cn";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizable";

export interface SplitHandleProps {
  orientation?: "horizontal" | "vertical";
  defaultSize?: number;
  minSize?: number;
  maxSize?: number;
  start: ReactNode;
  end: ReactNode;
  className?: string;
  label?: string;
}

/** DesignX split-handle — shadcn Resizable with the existing start/end API. */
export function SplitHandle({
  orientation = "horizontal",
  defaultSize = 40,
  minSize = 20,
  maxSize = 80,
  start,
  end,
  className,
  label = "Resize panes",
}: SplitHandleProps) {
  return (
    <ResizablePanelGroup
      data-slot="split-handle"
      direction={orientation}
      className={cn("min-h-0 min-w-0", className)}
    >
      <ResizablePanel defaultSize={defaultSize} minSize={minSize} maxSize={maxSize}>
        {start}
      </ResizablePanel>
      <ResizableHandle withHandle aria-label={label} />
      <ResizablePanel defaultSize={100 - defaultSize} minSize={100 - maxSize}>
        {end}
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}