/* This can't be removed as it must be in scope for rewriting JSX to JS. */ 
import * as React from 'react';

import classnames from 'classnames';

/* Accelerator components, interfaces, styles, functions, etc. Feel free to
 * destructure this as you see fit but watch out that you don't get mixed up
 * between bundle props and component props with the same name (e.g. tags). */
import * as components from '../../bundles/componentsBundle';

/* You may leave the @ts-ignore directive here, remove it if you want compiler
 * errors should you not remove it from a passage which does not use the
 * passages bundle, or remove both if you have no intention of ever using the
 * bundle. */
// @ts-ignore
import * as passages from '../../bundles/passagesBundle';

/* You may leave the @ts-ignore directive here, remove it if you want compiler
 * errors should you not remove it from a passage which does not use the tags
 * bundle, or remove both if you have no intention of ever using tags. */
// @ts-ignore
import * as tags from '../../bundles/tagsBundle';

/**
 * The authoring passage is imported and rendered into the React passage.
 */
import AuthoringPassage from './{{{name}}}.mdx';

import builtInStyles from '../../passages/_global-styles/built-ins.less';
import styles from './{{{name}}}.less';

const Passage = ({
  children,
  ...props
}) => (
  <components.Article
    className={classnames(
      'passage',
      styles['{{{name}}}'],
      builtInStyles.passage,
    )}
  >
    <components.AuthoringPassageContainer passageProps={{ ...props }}>
      <AuthoringPassage />
    </components.AuthoringPassageContainer>
  </components.Article>
);

export default {
  /* string: the story-unique name of the passage. */
  name: '{{{name}}}',

  /* array: an optional collection of either plain strings or
   * { key: string, value: string } (Tag) objects. */
  tags: [],

  /* React component with a props signature of IPassageProps: the content that
   * should be displayed, or, in the case of noRender passages, a component
   * that can be imported. Should be formatted in JSX style. */
  content: Passage,
};