import { ReactNode } from 'react';

import type { Styles } from '@cleartrip/ct-design-types';

/**
 * Safe-area insets for the four edges of the device viewport.
 * Values correspond to the space required to avoid system UI (notch,
 * home indicator, status bar, etc.) in density-independent pixels.
 */
export interface SafeAreaInsets {
  top?: number;
  bottom?: number;
  left?: number;
  right?: number;
}

/**
 * Shape of the SafeAreaContext value — exposes the current insets and
 * an optional setter so descendants can push their measured values up.
 */
export interface SafeAreaContextType {
  insets: SafeAreaInsets;
  handleInsets?: (insets: SafeAreaInsets) => void;
}

/**
 * Props accepted by `SafeAreaProvider`.
 */
export interface ISafeAreaProvider {
  children: ReactNode;
  /**
   * Insets to seed the provider with. Useful for SSR or tests where
   * the platform cannot supply real measurements.
   */
  initialMetrics?: SafeAreaInsets;
}

/**
 * Style configuration for the SafeAreaContainer root element. Mirrors
 * the pattern used by Container / Typography so consumers can override
 * the default flex + padding block.
 */
export interface SafeAreaContainerStyleConfigProps {
  /**
   * Styles for the root wrapper element (web `<div>` or RN `View`).
   */
  root?: Styles[];
}

/**
 * Public props for the `SafeAreaContainer` component.
 */
export interface ISafeAreaContainer {
  /**
   * Content rendered inside the safe-area padded wrapper.
   */
  children: ReactNode;

  /**
   * Optional style overrides applied after the computed safe-area
   * padding so consumers can always win the cascade.
   */
  styleConfig?: SafeAreaContainerStyleConfigProps;
}