import React from 'react';
import PropTypes from 'prop-types';
import IframeResizer from 'iframe-resizer-react';
import DevDocLinks from './DevDocLinks';

const ComponentPreview = ({
  componentName,
  hasReact,
  hasAngular,
  hasHTML,
  componentType,
  minHeight,
  maxHeight,
  maxWidth,
  allowScrolling,
}) => {
  const iframeURL = `https://html.sparkdesignsystem.com/iframe.html?id=${componentType}-${componentName}`;

  return (
    <div className="sprk-u-mbm sprk-u-ptl">
      <div className="sprk-u-mbl">
        <IframeResizer
          style={{
            minHeight,
            maxHeight,
            maxWidth,
          }}
          scrolling={allowScrolling}
          title="Component Preview"
          className="docs-c-ComponentPreview sprk-o-Box"
          src={iframeURL}
          loading="lazy"
        />
      </div>

      {(hasHTML || hasAngular || hasReact) && (
        <DevDocLinks
          hasAngular={hasAngular}
          hasHTML={hasHTML}
          hasReact={hasReact}
          componentType={componentType}
          componentName={componentName}
        />
      )}
    </div>
  );
};

ComponentPreview.propTypes = {
  componentName: PropTypes.string,
  componentType: PropTypes.string,
  hasAngular: PropTypes.bool,
  hasReact: PropTypes.bool,
  hasHTML: PropTypes.bool,
  maxHeight: PropTypes.string,
  maxWidth: PropTypes.string,
  minHeight: PropTypes.string,
  allowScrolling: PropTypes.bool,
};

ComponentPreview.defaultProps = {
  componentType: 'components',
  allowScrolling: false,
};

export default ComponentPreview;

@@ -303,16 +303,25 @@
 olling,%0A
+  title,%0A
 %7D) =%3E %7B%0A
@@ -698,27 +698,15 @@
 tle=
-%22Component Preview%22
+%7Btitle%7D
 %0A   
@@ -1428,16 +1428,43 @@
 s.bool,%0A
+  title: PropTypes.string,%0A
 %7D;%0A%0AComp
@@ -1549,16 +1549,46 @@
  false,%0A
+  title: 'Component Preview',%0A
 %7D;%0A%0Aexpo

allow ComponentPreview title to be overridden