import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Avatar } from 'components/avatar';
import { Container } from 'components/layout';
import { Text } from 'components';
import { Home } from 'icons';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { PortalProvider } from '@gorhom/portal';
import { TopBar } from './index';

export default {
  title: 'App Components/TopBar',
  component: TopBar,
  argTypes: {},
} as ComponentMeta<typeof TopBar>;

export const Interactive: ComponentStory<typeof TopBar> = (args) => {
  return (
    <SafeAreaProvider>
      <PortalProvider>
        <TopBar {...args} />
      </PortalProvider>
    </SafeAreaProvider>
  );
};

Interactive.args = {
  leftElement: <Home />,
  centerElement: (
    <Container>
      <Text variant="title" color="white">
        We are the center element
      </Text>
    </Container>
  ),
  rightElement: (
    <Container>
      <Avatar titleColor="white" colorVariant="success" sizeVariant="small" title="Sarmad" />
    </Container>
  ),
};