import { createContext, useContext, type ReactNode } from "react";

export type UhuruPanelIconHoverAnimation = "none" | "lift" | "slide" | "pulse";

export type UhuruPanelState = {
  collapsed: boolean;
  collapsedSize?: number;
  expandOnHover?: boolean;
  iconHoverAnimation?: UhuruPanelIconHoverAnimation;
  onToggleCollapsed?: () => void;
  showRail?: boolean;
  showToggle?: boolean;
  side: "left" | "right" | "bottom";
};

const UhuruPanelContext = createContext<UhuruPanelState | null>(null);

export function UhuruPanelStateProvider({
  children,
  collapsed,
  collapsedSize,
  expandOnHover,
  iconHoverAnimation,
  onToggleCollapsed,
  showRail,
  showToggle,
  side,
}: UhuruPanelState & { children: ReactNode }) {
  return (
    <UhuruPanelContext.Provider value={{ collapsed, collapsedSize, expandOnHover, iconHoverAnimation, onToggleCollapsed, showRail, showToggle, side }}>
      {children}
    </UhuruPanelContext.Provider>
  );
}

export function useUhuruPanelState() {
  return useContext(UhuruPanelContext);
}