import type {SafeAreaInsets} from '@shopify/shop-minis-platform'

/**
 * Returns the safe area insets for the current device in pixels. These values represent the areas of the screen obscured by system UI such as the home indicator on iOS or the navigation bar on Android. Use these values to ensure your content is not hidden behind system chrome.
 *
 * The insets are injected by the Shop app and work reliably on both iOS and Android. The equivalent CSS custom properties (`--safe-area-inset-top`, `--safe-area-inset-right`, `--safe-area-inset-bottom`, `--safe-area-inset-left`) are also available for use in stylesheets.
 *
 * Your Mini should handle all four edges to ensure correct rendering across devices and future layout changes.
 * @publicDocs
 */
export type UseSafeAreaGeneratedType = SafeAreaInsets

const DEFAULT_INSETS: SafeAreaInsets = {top: 0, right: 0, bottom: 0, left: 0}

/**
 * Returns the safe area insets for the current device.
 *
 * These values represent the areas of the screen that are obscured by
 * system UI (home indicator, navigation bar, etc). Use them to ensure
 * content isn't hidden behind system chrome.
 *
 * The values are also available as CSS custom properties:
 * `--safe-area-inset-top`, `--safe-area-inset-right`,
 * `--safe-area-inset-bottom`, `--safe-area-inset-left`
 *
 * @example
 * ```tsx
 * const {bottom} = useSafeArea()
 * return <div style={{paddingBottom: bottom}}>Content</div>
 * ```
 * @publicDocs
 */
export function useSafeArea(): SafeAreaInsets {
  return window.minisParams?.safeAreaInsets ?? DEFAULT_INSETS
}