import classNames from 'classnames';
import React from 'react';
const borderedPaddingAndBorderPx = 18;
/**
 * Wraps children into responsive container, which is used to prevent reflows as external media like images or videos
 * finish loading, see https://www.perpetual-beta.org/weblog/responsive-images-without-browser-reflow.html for more
 * information.
 */
const ResponsiveMediaContainer = ({ bordered = false, className, children, height, width, caption, captionId }) => {
    const paddingBottom = `${(height / width) * 100}%`;
    const maxWidth = width + (bordered ? borderedPaddingAndBorderPx : 0);
    return (React.createElement("span", { className: classNames('responsive-media-container', { 'responsive-media-container--bordered': bordered }, className), style: {
            maxWidth
        } },
        React.createElement("span", { className: "responsive-media-container__inner", style: {
                paddingBottom
            } }, children),
        caption && (React.createElement("span", { className: "e-block e-mrg-t-1 e-font-size-s e-light", id: captionId }, caption))));
};
export default ResponsiveMediaContainer;
//# sourceMappingURL=ResponsiveMediaContainer.js.map