import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../../theme';
import StickyActionBar from './StickyActionBar';

describe('<StickyActionBar/> component', () => {
  it('renders its children inside a sticky-bottom container', () => {
    const { container } = render(
      <ThemeProvider>
        <StickyActionBar>
          <button type="button">مشاهده ۱۲ پرستار</button>
        </StickyActionBar>
      </ThemeProvider>,
    );
    expect(screen.getByText('مشاهده ۱۲ پرستار')).toBeInTheDocument();
    const bar = container.querySelector('[data-sticky-action-bar]');
    expect(bar).toBeInTheDocument();
    // The offset is the frame's published chrome height, so the bar clears a pinned bottom nav; the
    // `0px` fallback is what a chrome-free shell (and this bare render) resolves to.
    expect(bar).toHaveStyle({ position: 'sticky', bottom: 'var(--bal-chrome-bottom, 0px)' });
  });
});
