import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';

import NoticeModal from './index';

storiesOf('NoticeModal')
  .addDecorator(checkA11y)
  .add('should render', () => (
    <div style={{ width: '100%', height: '100%' }}>
      <NoticeModal
        title="We have a new look!"
        description="We’ve moved a few things around in the interface which we believe will best set up Analyze for the future. Take a look around!"
        cta="Thanks, I’ll explore!"
        cookie=""
      >
        <img
          src="https://s3.amazonaws.com/buffer-analyze/images/modal-new-layout.png"
          alt="The new navigation layout"
          width="527px"
          height="298px"
        />
      </NoticeModal>
    </div>
  ))
  .add('should not render if dismissed', () => (
    <div style={{ width: '100%', height: '100%' }}>
      <NoticeModal
        title="We have a new look!"
        description="We’ve moved a few things around in the interface which we believe will best set up Analyze for the future. Take a look around!"
        cta="Thanks, I’ll explore!"
        cookie="analyze_notice_modal=dismissed;"
      >
        <img
          src="https://s3.amazonaws.com/buffer-analyze/images/modal-new-layout.png"
          alt="The new navigation layout"
          width="527px"
          height="298px"
        />
      </NoticeModal>
    </div>
  ));