import * as React from 'react';
import { DemoSection } from '../../typings/story-section';
import { SkeletonRectangle } from '../../SkeletonRectangle/SkeletonRectangle';
import styles from '../styles.scss';

export const demo = (props: DemoSection) => {
  const DemoComponent = props.component;

  return (
    <div className={styles.demo}>
      {props.loading ? (
        <SkeletonRectangle height="75px" />
      ) : typeof DemoComponent === 'function' ? (
        <DemoComponent />
      ) : (
        DemoComponent
      )}
    </div>
  );
};