import React from 'react';
import {storiesOf} from '@storybook/react';
import {array} from '@storybook/addon-knobs';

import ErrorLabel, {ERROR_LABEL_MODE} from '../../Components/ErrorLabel/src';

export default storiesOf('Components | ErrorLabel', module)
  .add('Tooltip', () => {
    const errors = array('Errors', ['One', 'Two']);
    const containerStyle = {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexWrap: 'wrap',
      padding: '20px',
      overflow: 'hidden',
      width: '100%',
      border: '1px solid #000',
    };

    return (
      <div style={containerStyle}>
        <ErrorLabel
          elementId="error-label"
          errors={errors}
        />
      </div>
    );
  })
  .add('Inline', () => {
    const errors = array('Errors', ['Lorem ipsum dolor sit amet', 'Ut enim ad minim veniam']);

    return (
      <ErrorLabel
        elementId="error-label"
        mode={ERROR_LABEL_MODE.INLINE}
        errors={errors}
      />
    );
  });