platform-codebase/@packages/@utility/zname/src/react.tsx

/**
 * React implementation of ZName component and useZName hook.
 */

import React from "react"
import type { CSSProperties, ReactNode } from "react"

import { ZINDEX_LAYERS, type ZIndexLayerName } from "./constants"

/**
 * Props for the React ZName component.
 */
interface ReactZNameProps {
  /** The z-index layer to apply */
  name: ZIndexLayerName;
  /** Child content to wrap */
  children: ReactNode;
  /** Additional CSS styles */
  style?: CSSProperties;
  /** Override z-index value (use sparingly) */
  zIndex?: number;
}

/**
 * Hook to get z-index value for a layer name.
 *
 * @example
 * ```tsx
 * const modalZIndex = useZName('modal'); // 2000
 * const ageGateZIndex = useZName('high-priority'); // 9000
 * ```
 */
export function useZName(layer: ZIndexLayerName): number {
  return ZINDEX_LAYERS[layer]
}

/**
 * Component that wraps children in a div with the specified z-index layer.
 *
 * @example
 * ```tsx
 * <ZName name="modal" style={{ background: 'white' }}>
 *   <ModalContent />
 * </ZName>
 * ```
 */
export const ZName: React.FC<ReactZNameProps> = ({
  name,
  children,
  style,
  zIndex: customZIndex,
}) => {
  const zIndex = customZIndex ?? ZINDEX_LAYERS[name]

  return (
    <div
      style={{
        position: "relative",
        zIndex,
        ...style,
      }}
    >
      {children}
    </div>
  )
}

// Re-export constants for convenience
export { ZINDEX_LAYERS, type ZIndexLayerName }

export default ZName