import * as React from 'react';
import classnames from 'classnames';

import { DescriptionSection } from '../../typings/story-section';
import Markdown from '../../Markdown';
import styles from './styles.scss';
import { SkeletonRectangle } from '../../SkeletonRectangle/SkeletonRectangle';

export const description: (a: DescriptionSection) => React.ReactNode = ({
  dataHook = '',
  text,
  size = 'normal',
  width = '100%',
  loading,
}) =>
  loading ? (
    <SkeletonRectangle margin="0 0 38px 0" height="24px" />
  ) : (
    <div
      style={{ width }}
      className={classnames(styles.description, {
        [styles.descriptionSmall]: size === 'small',
      })}
    >
      {typeof text === 'string' ? (
        <Markdown data-hook={`${dataHook}-markdown`} source={text} />
      ) : (
        text
      )}
    </div>
  );