/**
 * A layout wrapper that prevents header and footer content from animating during screen view transitions. Use this to keep navigation bars, headers, footers or bottom tab bars fixed in place while page content animates.
 *
 * > Caution: Only use one StaticArea per position (top or bottom) in your app. Multiple StaticAreas with the same position will have duplicate view transition names, which will cause view transitions to fail.
 * @publicDocs
 */
export interface StaticAreaDocProps {
  /** Position of the fixed area on screen - either pinned to top or bottom */
  position: 'top' | 'bottom'
  /** Static area content */
  children?: React.ReactNode
}

export function StaticArea({
  position,
  children,
}: {
  position: 'top' | 'bottom'
  children: React.ReactNode
}) {
  return (
    <div
      style={{
        position: 'fixed',
        left: 0,
        right: 0,
        [position]: 0,
        viewTransitionName: `minis-fixed-${position}`,
      }}
    >
      {children}
    </div>
  )
}