import React, { useEffect, useReducer, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import styled from 'styled-components';
import { LoaderIcon } from './LoaderIcon';

const css = styled.div;

const Style = css`
   background: white !important;
`;

storiesOf('Components/LoaderIcon', module)
   .add('default', () => {
      return (
         <div className="m-4 col-sm-3">
            <LoaderIcon />
         </div>
      );
   })
   .add('with color', () => {
      return (
         <div className="m-4 col-sm-3">
            <LoaderIcon color="orange" />
            <LoaderIcon color="crimson" />
            <LoaderIcon color="blue" />
         </div>
      );
   })
   .add('with size', () => {
      return (
         <div className="m-4 col-sm-3">
            <LoaderIcon color="orange" size={24} />
            <LoaderIcon color="crimson" size={48} />
            <LoaderIcon color="blue" size={96} />
         </div>
      );
   });
