import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Container } from 'components/layout';
import { Text } from 'components/text';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { BrowserRouter } from 'react-router-dom';
import { BackHeader } from './index';
export default {
  title: 'Design System/BackHeader',
  component: BackHeader,
} as ComponentMeta<typeof BackHeader>;

export const Interactive: ComponentStory<typeof BackHeader> = (args) => {
  return (
    <BrowserRouter>
      <SafeAreaProvider>
        <BackHeader
          ml="xs"
          {...args}
          leftElement={
            <Container>
              <Text variant="body">Left Element</Text>
            </Container>
          }
          centerElement={
            <Container>
              <Text variant="body">Center Element</Text>
            </Container>
          }
          rightElement={
            <Container>
              <Text variant="body">Right Element</Text>
            </Container>
          }
        />
      </SafeAreaProvider>
    </BrowserRouter>
  );
};

Interactive.args = {
  isAction: false,
  isDivider: false,
  isBack: false,
  unRead: 10,
  isPopUp: true,
};