import { FunctionComponent, ReactNode } from 'react';
import Box from '@mui/material/Box';

export interface StickyActionBarProps {
  children: ReactNode;
}

/**
 * A bottom-pinned action bar for a scrolling screen — the C1 live-count CTA and the C3 booking CTA.
 * Rendered as the last child of a page's scrolling content, `position: sticky` pins it to the bottom
 * of the nearest scrolling ancestor (the shell's `main`).
 *
 * The offset comes from `--bal-chrome-bottom`, which `AppFrame` publishes on that scroll container:
 * the bottom nav is pinned *over* the scrollport, so a bar at `bottom: 0` would sit behind it. The
 * property already includes `env(safe-area-inset-bottom)` and resolves to `0px` in a chrome-free
 * shell, so this component neither re-implements the safe area nor needs to know which shell it is in.
 * @component StickyActionBar
 */
const StickyActionBar: FunctionComponent<StickyActionBarProps> = ({ children }) => (
  <Box
    data-sticky-action-bar
    sx={{
      position: 'sticky',
      bottom: 'var(--bal-chrome-bottom, 0px)',
      zIndex: 1,
      mt: 2,
      pt: 1.5,
      pb: 1.5,
      bgcolor: 'background.default',
      borderTop: '1px solid',
      borderColor: 'divider',
    }}
  >
    {children}
  </Box>
);

export default StickyActionBar;
