import React from "react";
import PropTypes from "prop-types";
import "./SummaryBlock.scss";

const SummaryBlock = ({
  text1,
  text2,
  text3,
  text4,
  buttonText,
  propsButton
}) => {
  return (
    <div className="summary-div-block-8">
      <div className="summary-div-block-10">
        <div className="summary-text-block-5">{text1}</div>
        <div className="summary-text-block-sub">
          {text2}
          <br />
        </div>
        <div className="summary-div-block-11">
          <div className="summary-text-block-6">
            {text3}
            <br />
          </div>
          <div className="summary-text-block-7">
            <strong className="summary-bold-text-2">{text4}</strong>
            <br />
          </div>
        </div>
      </div>
      <div className="summary-div-block-9 w-clearfix">
        <a
          href="#0"
          id="w-node-88e0ca71dbe6"
          className="summary-2-button w-button"
          {...propsButton}
        >
          {buttonText}
        </a>
      </div>
    </div>
  );
};

SummaryBlock.propTypes = {
  /** The text1 for the text1 */
  text1: PropTypes.string,
  /** The text2 for the text2 */
  text2: PropTypes.string,
  /** The text3 for the text3 */
  text3: PropTypes.string,
  /** The text4 for the text4 */
  text4: PropTypes.string,
  /** The buttonText for the buttonText */
  buttonText: PropTypes.string,
  /** The propsButton for the propsButton */
  propsButton: PropTypes.object
};

SummaryBlock.defaultProps = {
  text1: "Summary",
  text2: "Fulfilling from 8A Nguyen Van Mai Ward 4.",
  text3: "2 of 2",
  text4: "MARK AS FULFILLED",
  buttonText: "Mask As Fulfill",
  propsButton: {
    onclick: event => {
      console.log("you click on", event.target);
    }
  }
};

export default SummaryBlock;