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

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

storiesOf('atoms/links', module).addDecorator(withKnobs({ escapeHTML: false })).add('FootNote', function () {
  var props = {
    index: text('index', '1'),
    children: text('children', 'This is the footnote <a href="https://www.mass.gov/">(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 },
      props.children
    )
  );
}, { info: FootNoteDocs });