import React from "react";
import "../FulFillCardVer1.scss";
type FulFillCardVer1Props = {
  logofulfill?: string;
  text1?: string;
  text2?: string;
  items?: {
    image?: string;
    badge?: number;
    name?: string;
    sku?: string;
    type?: string;
    priceAndQuantity?: string;
    totalPrice?: string;
  }[];
  buttonText?: string;
  onClick?: (...args: any[]) => any;
};
type items = {
  image?: string;
  badge?: number;
  name?: string;
  sku?: string;
  type?: string;
  priceAndQuantity?: string;
  totalPrice?: string;
};
const FulFillCardVer1: React.SFC<FulFillCardVer1Props> = ({
  logofulfill,
  buttonText,
  items,
  onClick,
  text1,
  text2
}: FulFillCardVer1Props) => {
  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: items) => (
          <>
            <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.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: any) => {
    // eslint-disable-next-line no-console
    console.log("You have clicked me!", event.target);
  }
};
export default FulFillCardVer1;