import React from "react";
import "../FulFillCardVer2.scss";

type item = {
  image?: string;
  badge?: string;
  name?: string;
  link?: string;
  sku?: string;
  type?: string;
  weight?: string;
};
type FulFillCardVer2Props = {
  text1?: string;
  text2?: string;
  textcolumn1?: string;
  textcolumn2?: string;
  textcolumn3?: string;
  items?: item[];
  text3?: string;
  text4?: string;
};
const FulFillCardVer2: React.SFC<FulFillCardVer2Props> = ({
  items,
  text1,
  text2,
  text3,
  text4,
  textcolumn1,
  textcolumn2,
  textcolumn3
}: FulFillCardVer2Props) => {
  return (
    <div className="fulfillcardver2-div-block-2">
      <h3 className="fulfillcardver2-heading2">
        {text1}
        <br />
      </h3>
      <div id="w-node-617404893b43" className="fulfillcardver2-div-block">
        <div className="fulfillcardver2-text-block">
          {text2}
          <br />
        </div>
      </div>
      <div className="fulfillcardver2-container--fulfill w-container">
        <div className="w-layout-grid fulfillcardver2-grid-2">
          <div
            id="w-node-55d1834fae2f"
            className="fulfillcardver2-text-block-8"
          >
            {textcolumn1}
          </div>
          <div
            id="w-node-48697d67703c"
            className="fulfillcardver2-text-block-10"
          >
            {textcolumn2}
          </div>
          <div
            id="w-node-ba474be092c0"
            className="fulfillcardver2-text-block-9"
          >
            {textcolumn3}
            <br />
          </div>
        </div>
        <div className="fulfillcardver2-div-block-3" />

        {items.map((data: item) => (
          <>
            <div className="w-layout-grid fulfillcardver2-grid-2">
              <div
                id="w-node-5431a93cfdca"
                className="fulfillcardver2div-block-7"
              >
                <div
                  id="w-node-5431a93cfdcb"
                  className="fulfillcardver2-div-block-5"
                >
                  <img
                    src={data.image}
                    alt="true"
                    className="fulfillcardver2-image"
                  />
                </div>
                <div id="w-node-5431a93cfdcd">
                  <a
                    href={data.link}
                    target="_blank"
                    className="fulfillcardver2-link"
                  >
                    {data.name}
                    <br />
                  </a>
                  <div>
                    {data.sku}
                    <br />
                  </div>
                  <div>
                    {data.type}
                    <br />
                  </div>
                </div>
              </div>
              <div id="w-node-5431a93cfdd7">
                {data.weight}
                <br />
              </div>
              <div
                id="w-node-5431a93cfdda"
                className="fulfillcardver2-form-block w-form"
              >
                <form id="email-form" name="email-form" data-name="Email Form">
                  <input
                    type="tel"
                    className="fulfillcardver2-text-field w-input"
                    disabled={true}
                    maxLength={256}
                    name="name-2"
                    data-name="Name 2"
                    placeholder=""
                    value={data.badge}
                    id="name-2"
                  />
                </form>
                <div className="w-form-done">
                  <div>Thank you! Your submission has been received!</div>
                </div>
                <div className="w-form-fail">
                  <div>
                    Oops! Something went wrong while submitting the form.
                  </div>
                </div>
              </div>
            </div>
            <div className="fulfillcardver2-div-block-3" />
          </>
        ))}
      </div>
    </div>
  );
};
FulFillCardVer2.defaultProps = {
  text1: "Mark as fulfilled",
  text2: "QUANTITY TO FULFILL",
  textcolumn1: "Items",
  textcolumn2: "Quantity",
  textcolumn3: "Weight",
  items: [
    {
      image:
        "https://uploads-ssl.webflow.com/5bbed931f8149f332875c562/5bbf02acbd08906c00233766_Printer_small.jpg",
      badge: "1 of 1",
      name: "Faxtex Product Sample",
      link: "#0",
      sku: "SKU: 4827521",
      type: "M / Blue",
      weight: "0kg"
    },
    {
      image:
        "https://cdn.shopify.com/s/files/1/0053/4508/3490/products/Photocamera_small.jpg?v=1538713910",
      badge: "5 of 10",
      name: "Donkix Product Sample",
      link: "#0",
      type: "M / Red / 1 Year",
      weight: "0kg"
    }
  ],
  text3: "TRACKING INFORMATION ",
  text4: "OPTIONAL"
};
export default FulFillCardVer2;