import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text } from '@storybook/addon-knobs';

import FootNoteLink from './index';
import FootNote from '../FootNote/index';
import FootNoteLinkDocs from './FootNoteLink.md';

storiesOf('atoms/links', module).addDecorator(withKnobs({ escapeHTML: false })).add('FootNoteLink', function () {
  var props = {
    index: text('index', '1')
  };
  var rawHtml = 'This is the footnote <a href="#">(reference)</a>.';
  return React.createElement(
    'div',
    null,
    React.createElement(
      'p',
      null,
      'This is where the footnote would be referenced. ',
      React.createElement(FootNoteLink, { index: props.index }),
      ' '
    ),
    React.createElement(
      FootNote,
      { index: props.index },
      rawHtml
    )
  );
}, { info: FootNoteLinkDocs });