import React from "react";
import style from "./style";

const HeadlineContent = props => {
  const { settings } = props;
  const padding = settings.properties ? settings.properties.padding : 0;

  return (
    <h1 style={{ padding }}>
      <span
        style={{
          ...style.content,
          ...settings.properties,
          marginTop: 0,
          padding: 0
          // lineHeight: 0,
        }}
        dangerouslySetInnerHTML={{
          __html: settings.html || "Enter Your Headline Here"
        }}
      />
    </h1>
  );
};

const Headline = props => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";

  return (
    <div style={{ marginTop, textAlign }}>
      <HeadlineContent {...props} />
    </div>
  );
};

export default Headline;