import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '../Button';
import { AnimationInOut } from './index';

storiesOf('Components/AnimationInOut', module).add('default', () => {
   const [open, setOpen] = useState(true);

   return (
      <div className="p-4">
         <Button onClick={() => setOpen(!open)}>{open ? 'Fade out' : 'Fade in'}</Button>
         <AnimationInOut visible={open} durationIn={1000} durationOut={5000}>
            <img
               src="https://i.pinimg.com/originals/0e/12/04/0e120409b3c3668e48359d5698615763.jpg"
               alt=""
               width={200}
            />
         </AnimationInOut>
      </div>
   );
});
