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

storiesOf('Components/InitialsAvatar', module)
   .add('default', () => {
      return (
         <div>
            <div>
               <InitialsAvatar name="John" />
            </div>
         </div>
      );
   })
   .add('with size', () => {
      return (
         <div>
            <span className="p-2">
               <InitialsAvatar name="Notorious Chase" size="xs" />
            </span>
            <span className="p-2">
               <InitialsAvatar name="Made Heaven" size="s" />
            </span>
            <span className="p-2">
               <InitialsAvatar name="Star Platinum" size="m" />
            </span>
            <span className="p-2">
               <InitialsAvatar name="Crazy Diamond" size="l" />
            </span>
            <span className="p-2">
               <InitialsAvatar name="King crimson" size="xl" />
            </span>
         </div>
      );
   })
   .add('custom size', () => {
      return (
         <span className="p-2">
            <InitialsAvatar name="veronica" sizeCircle={52} />
         </span>
      );
   });
