/* eslint-disable react/jsx-props-no-spreading */

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { resolve } from 'path';

import { ThumborImage } from 'react-thumbor-img';

const SmartImage = forwardRef((props, ref) => {
  const { src, server, alt } = props;

  const absolutePath = resolve(src).substring(1);

  return (
    <ThumborImage
      ref={ref}
      server={server}
      alt={alt}
      {...props}
      src={absolutePath}
    />
  );
});

SmartImage.propTypes = {
  alt: PropTypes.string,
  server: PropTypes.string,
  src: PropTypes.string.isRequired,
};

SmartImage.defaultProps = {
  alt: '',
  server: 'https://media.venturatravel.org',
};

SmartImage.displayName = 'SmartImage';

export default SmartImage;