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

/**
 * React Native implementation of ZName component and useZNameRN hook.
 */

import React from "react"
import { View } from "react-native"
import type { ViewStyle } from "react-native"

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

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

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

/**
 * Component that wraps children in a View with the specified z-index layer.
 * Automatically sets Android elevation to match zIndex.
 *
 * @example
 * ```tsx
 * <ZName name="modal" style={{ backgroundColor: 'white' }}>
 *   <ModalContent />
 * </ZName>
 * ```
 */
export const ZName: React.FC<ReactNativeZNameProps> = ({
  name,
  children,
  style,
  zIndex: customZIndex,
}) => {
  const zIndex = customZIndex ?? ZINDEX_LAYERS[name]

  return (
    <View
      style={[
        {
          zIndex,
          elevation: zIndex, // Android shadow/stacking
        },
        style,
      ]}
    >
      {children}
    </View>
  )
}

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

export default ZName