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

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