import React from "react";
import PropTypes from "prop-types";
import "../FulFillCardVer1.scss";
const FulFillCardVer1 = ({
  logofulfill,
  buttonText,
  items,
  onClick,
  text1,
  text2
}) => {
  return (
    <div className="fulfillcardver1-div-block-2 w-clearfix">
      <div className="fulfillcardver1-div-block-0">
        <img
          src={logofulfill}
          width={35}
          height={35}
          id="w-node-260821797f88"
          alt="true"
          className="fulfillcardver1-image-0"
        />
        <h3 id="w-node-260821797f89" className="fulfillcardver1-heading-0">
          {text1}
          <br />
        </h3>
      </div>
      <div id="w-node-260821797f8c" className="fulfillcardver1-div-block">
        <div className="fulfillcardver1-text-block">
          {text2}
          <br />
        </div>
      </div>
      <div className="fulfillcardver1-container--fulfill w-container">
        {items.map(data => (
          <>
            <div className="w-layout-grid fulfillcardver1-grid-2">
              <div
                id="w-node-260821797f92"
                className="fulfillcardver1-div-block-5"
              >
                <div className="fulfillcardver1-text-block-3">{data.badge}</div>
                <img
                  src={data.image}
                  alt="true"
                  className="fulfillcardver1-image"
                />
              </div>
              <div
                id="w-node-260821797f96"
                className="fulfillcardver1-dei-block-1"
              >
                <a href="#0" target="_blank" className="fulfillcardver1-link">
                  {data.name}
                  <br />
                </a>
                <div>
                  {data.sku}
                  <br />
                </div>
                <div>
                  {data.type}
                  <br />
                </div>
              </div>
              <div
                id="w-node-260821797fa0"
                className="fulfillcardver1-text-block-0"
              >
                {data.priceAndQuantity}
                <br />
              </div>
              <div
                id="w-node-260821797fa3"
                className="fulfillcardver1-text-block-0"
              >
                {data.totalPrice}
                <br />
              </div>
            </div>
            <div className="fulfillcardver1-div-block-3" />
          </>
        ))}
      </div>

      <a
        href="#0"
        className="fulfillcardver1-button-0 w-button"
        onClick={onClick}
      >
        {buttonText}
      </a>
    </div>
  );
};

FulFillCardVer1.propTypes = {
  /** The logofulfill for the logofulfill */
  logofulfill: PropTypes.string,
  /** The text1 for the text1 */
  text1: PropTypes.string,
  /** The text2 for the text2 */
  text2: PropTypes.string,
  /** The items for the items */
  items: PropTypes.arrayOf(
    PropTypes.shape({
      /** The image for the image */
      image: PropTypes.string,
      /** The badge for the badge */
      badge: PropTypes.number,
      /** The name for the name */
      name: PropTypes.string,
      /** The sku for the sku */
      sku: PropTypes.string,
      /** The type for the type */
      type: PropTypes.string,
      /** The priceAndQuantity for the priceAndQuantity */
      priceAndQuantity: PropTypes.string,
      /** The totalPrice for the totalPrice */
      totalPrice: PropTypes.string
    })
  ),
  /** The buttonText for the buttonText */
  buttonText: PropTypes.string,
  /** The onClick for the onClick */
  onClick: PropTypes.func
};
FulFillCardVer1.defaultProps = {
  logofulfill:
    "https://uploads-ssl.webflow.com/5bbed931f8149f332875c562/5bbf0c769fc0b60f6851bfba_image.svg",
  text1: "Unfulfilled",
  text2: "QUANTITY TO FULFILL",
  items: [
    {
      image:
        "https://uploads-ssl.webflow.com/5bbed931f8149f332875c562/5bbf02acbd08906c00233766_Printer_small.jpg",
      badge: 1,
      name: "Faxtex Product Sample",
      sku: "SKU: 4827521",
      type: "M / Blue",
      priceAndQuantity: "110₫ × 1",
      totalPrice: "110₫"
    },
    {
      image:
        "https://cdn.shopify.com/s/files/1/0053/4508/3490/products/Photocamera_small.jpg?v=1538713910",
      badge: 10,
      name: "Donkix Product Sample",
      type: "M / Red / 1 Year",
      priceAndQuantity: "60₫ × 2",
      totalPrice: "120₫"
    }
  ],
  buttonText: "Mask As Fulfill",
  onClick: event => {
    // eslint-disable-next-line no-console
    console.log("You have clicked me!", event.target);
  }
};
export default FulFillCardVer1;