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

interface StreamSafeArea {
  /** Pixels from the screen top reserved for the segmented bar + metadata. */
  top: number;
  /** Pixels from the screen bottom reserved for compose dock + pills. */
  bottom: number;
}

const Ctx = createContext<StreamSafeArea>({ top: 0, bottom: 0 });

/**
 * Lets particle views know how much vertical space the chrome reserves so
 * scrollable content (long text, future inboxes) doesn't slip under the
 * segmented bar / compose dock. Defaults to 0/0 so views work outside the
 * StreamView shell (e.g. in a preview).
 */
export function StreamSafeAreaProvider({
  top,
  bottom,
  children,
}: StreamSafeArea & { children: ReactNode }) {
  return <Ctx.Provider value={{ top, bottom }}>{children}</Ctx.Provider>;
}

export function useStreamSafeArea(): StreamSafeArea {
  return useContext(Ctx);
}
