import { PortalProvider } from '@gorhom/portal';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Container } from 'components/layout';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { BrowserRouter } from 'react-router-dom';
import { SideBar } from './index';

export default {
  title: 'App Components/Side Bar',
  component: SideBar,
} as ComponentMeta<typeof SideBar>;

export const Interactive: ComponentStory<typeof SideBar> = (args) => {
  return (
    <BrowserRouter>
      <SafeAreaProvider>
        <PortalProvider>
          <Container height={300}>
            <SideBar {...args} />
          </Container>
        </PortalProvider>
      </SafeAreaProvider>
    </BrowserRouter>
  );
};

Interactive.args = {};