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`), so on mobile it naturally sits directly above
 * `BottomBar` (a separate flex sibling below `main`, which already owns the `env(safe-area-inset-bottom)`
 * padding — this component does not re-implement it) and on desktop it sits at the viewport bottom.
 * @component StickyActionBar
 */
const StickyActionBar: FunctionComponent<StickyActionBarProps> = ({ children }) => (
  <Box
    data-sticky-action-bar
    sx={{
      position: 'sticky',
      bottom: 0,
      zIndex: 1,
      mt: 2,
      pt: 1.5,
      pb: 1.5,
      bgcolor: 'background.default',
      borderTop: '1px solid',
      borderColor: 'divider',
    }}
  >
    {children}
  </Box>
);

export default StickyActionBar;
