import React from 'react';
import { View } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { UserAvatar } from '.';

storiesOf('UserAvatar', module)
   .add('default', () => {
      return (
         <>
            <View>
               <UserAvatar
                  user={{
                     name: 'veronica',
                     image:
                        'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
                  }}
               />
            </View>
         </>
      );
   })
   .add('with size without image', () => {
      return (
         <View>
            <View style={{ padding: 5 }}>
               <UserAvatar user={{ name: 'Notorious Chase' }} size="xs" />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar user={{ name: 'Made Heaven' }} size="s" />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar user={{ name: 'Star Platinum' }} size="m" />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar user={{ name: 'Crazy Diamond' }} size="l" />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar user={{ name: 'King crimson' }} size="xl" />
            </View>
         </View>
      );
   })
   .add('with size with image', () => {
      return (
         <View>
            <View style={{ padding: 5 }}>
               <UserAvatar
                  user={{
                     name: 'Notorious Chase',
                     image:
                        'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
                  }}
                  size="xs"
               />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar
                  user={{
                     name: 'Made Heaven',
                     image:
                        'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
                  }}
                  size="s"
               />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar
                  user={{
                     name: 'Star Platinum',
                     image:
                        'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
                  }}
                  size="m"
               />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar
                  user={{
                     name: 'Crazy Diamond',
                     image:
                        'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
                  }}
                  size="l"
               />
            </View>
            <View style={{ padding: 5 }}>
               <UserAvatar
                  user={{
                     name: 'King crimson',
                     image:
                        'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
                  }}
                  size="xl"
               />
            </View>
         </View>
      );
   })
   .add('custom size without image', () => {
      return (
         <View style={{ padding: 5 }}>
            <UserAvatar
               user={{
                  name: 'veronica',
               }}
               sizeCircle={200}
            />
         </View>
      );
   })
   .add('custom size with image', () => {
      return (
         <View style={{ padding: 5 }}>
            <UserAvatar
               user={{
                  name: 'veronica',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
               sizeCircle={200}
            />
         </View>
      );
   });
