import React from "react";
import "./SummaryBlock.scss";
type SummaryBlockProps = {
  text1?: string;
  text2?: string;
  text3?: string;
  text4?: string;
  buttonText?: string;
  propsButton?: object;
};
const SummaryBlock: React.SFC<SummaryBlockProps> = ({
  text1,
  text2,
  text3,
  text4,
  buttonText,
  propsButton
}: SummaryBlockProps) => {
  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.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: any) => {
      console.log("you click on", event.target);
    }
  }
};
export default SummaryBlock;