import React from 'react';

import { RiShoppingCart2Fill } from 'react-icons/ri';

import { Button, NotSupported } from 'components';

import run, { hasSupport } from '../../apis/web-payments';

function WebPayments() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <React.Fragment>
      <span
        className="
          tw-block
          tw-text-base
          tw-italic
          tw-mb-8
        "
      >
        Feel free to try out this information for purchase(Dont worry, it is all
        FAKE!!! 🙊)
      </span>
      <div
        className="
        tw-shadow
        tw-overflow-hidden
        tw-border-b 
        tw-border-gray-200
        sm:tw-rounded-lg
      "
      >
        <table
          className="
          tw-w-full
          tw-min-w-full
          tw-divide-y
          tw-divide-gray-200
        "
        >
          <thead className="tw-bg-gray-100">
            <tr>
              <th
                scope="col"
                className="
                tw-px-6
                tw-py-3
                tw-text-left
                tw-text-xs
                tw-font-medium
                tw-text-gray-500
                tw-uppercase
                tw-tracking-wider
              "
              >
                Property
              </th>
              <th
                scope="col"
                className="
                tw-px-6
                tw-py-3
                tw-text-left
                tw-text-xs
                tw-font-medium
                tw-text-gray-500
                tw-uppercase
                tw-tracking-wider
              "
              >
                Value
              </th>
            </tr>
          </thead>
          <tbody
            className="
          tw-bg-white
            tw-divide-y
            tw-divide-gray-200
          "
          >
            <tr>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Credit Card Number
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  5115883692618333
                </span>
              </td>
            </tr>
            <tr className="tw-bg-gray-50">
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Name on the Card
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Jhon Doe
                </span>
              </td>
            </tr>
            <tr>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  Card Expiry
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  3020
                </span>
              </td>
            </tr>
            <tr className="tw-bg-gray-50">
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <div
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  CVV
                </div>
              </td>
              <td
                className="
                tw-px-6
                tw-py-4
                tw-whitespace-nowrap
              "
              >
                <span
                  className="
                  tw-text-sm
                  tw-text-gray-900
                "
                >
                  007
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <span id="js-payment--message"></span>
      <div className="tw-flex tw-mt-4 tw-justify-end">
        <Button leftIcon={<RiShoppingCart2Fill />} onClick={run}>
          Click here to buy
        </Button>
      </div>
    </React.Fragment>
  );
}

export default WebPayments;