'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var clsx = require('clsx');
var React = require('react');
var jsxRuntime = require('react/jsx-runtime');
var useHasIntersected = require('../common/hooks/useHasIntersected/useHasIntersected.js');

const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
const Image = ({
  id,
  src,
  alt,
  onLoad,
  onError,
  className,
  loading,
  stretch = true,
  role,
  shrink = true
}) => {
  const elementReference = React.useRef(null);
  const [hasIntersected] = useHasIntersected.useHasIntersected({
    elRef: elementReference,
    loading
  });
  let imageSource = src;
  let imageOnLoad = onLoad;
  if (loading === 'lazy' && !hasIntersected) {
    imageSource = EmptyTransparentImage;
    imageOnLoad = undefined;
  }
  return /*#__PURE__*/jsxRuntime.jsx("img", {
    ref: elementReference,
    id: id,
    alt: alt,
    src: imageSource,
    className: clsx.clsx(['tw-image', {
      'tw-image__stretch': stretch,
      'tw-image__shrink': shrink
    }, className]),
    role: role,
    onLoad: imageOnLoad,
    onError: onError
  });
};

exports.EmptyTransparentImage = EmptyTransparentImage;
exports.default = Image;
//# sourceMappingURL=Image.js.map
