import _ from "lodash";
import React from "react";

export const PictureContent = props => {
  const { settings } = props;
  const pic = (
    <img
      alt=""
      src={settings.src}
      style={{
        width: "100%",
        height: "100%",
        maxWidth: "100%",
        maxHeight: "100%"
      }}
    />
  );

  return (
    <span style={{ ...settings.properties, marginTop: 0, padding: 0 }}>
      {_.has(settings, "href") &&
      settings.href &&
      !_.get(props, "ignoreHref", false) ? (
        <a style={{ cursor: "pointer" }} href={settings.href}>
          {pic}
        </a>
      ) : (
        pic
      )}
    </span>
  );
};

const Picture = props => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const padding = settings.properties ? settings.properties.padding : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";
  return (
    <div style={{ marginTop, textAlign }}>
      <div style={{ padding }}>
        <PictureContent {...props} />
      </div>
    </div>
  );
};

export default Picture;