/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";

interface InvoiceProps {
  orderData: any; // Provide the correct type for your order data
}

const Invoice: React.FC<InvoiceProps> = ({  }) => {
  return (
    <>
      <div>
        <main>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center !important",
            }}
          >
            <div
              style={{
                width: "50%",
                fontFamily: "Poppins, sans-serif",
                fontSize: 14,
                lineHeight: 22,
              }}
            >
              <strong style={{ fontWeight: "bolder" }}>Date:</strong> 20/03/2025
            </div>
            <div
              style={{
                width: "50%",
                textAlign: "right",
                fontFamily: "Poppins, sans-serif",
                fontSize: 14,
                lineHeight: 22,
              }}
            >
              <strong style={{ fontWeight: "bolder" }}>Invoice No:</strong>{" "}
              BAH-5645/2025
            </div>
          </div>
          <hr />
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center !important",
            }}
          >
            <div
              style={{
                width: "50%",
                fontFamily: "Poppins, sans-serif",
                fontSize: 14,
                lineHeight: 22,
              }}
            >
              <strong style={{ fontWeight: "bolder", color: "#752F8A" }}>
                DELYBELL LOGISTICS CO WLL
              </strong>
              <address
                style={{
                  fontStyle: "normal",
                  lineHeight: 22,
                  marginBottom: 15,
                }}
              >
                C.R.111829-2, Bldg.134, Road:354, Block:306
                <br />
                P.O. Box 3117, Manama, Bahrain
                <br />
                Tel: +(973) 3717 2727, 3372 0647
                <br />
                Email: delivery@delybell.com
                <br />
                <strong style={{ fontWeight: 500 }}>VAT#:</strong>{" "}
                220002993200002
              </address>
            </div>
            <div
              style={{
                width: "50%",
                textAlign: "right",
                fontFamily: "Poppins, sans-serif",
                fontSize: 14,
                lineHeight: 22,
              }}
            >
              <p
                style={{
                  fontFamily: "Poppins, sans-serif",
                  fontSize: 14,
                  lineHeight: 22,
                  fontWeight: 400,
                  margin: 0,
                }}
              >
                Bill To:
              </p>
              <strong style={{ fontWeight: "bolder" }}>SEEMA SHOP</strong>
              <address
                style={{
                  fontStyle: "normal",
                  lineHeight: 22,
                  marginBottom: 15,
                }}
              >
                SEEMA SHOPSHOP 1256C, ROAD 114,
                <br />
                BLOCK 101, HIDD, KINGDOM OF BAHRAIN.
                <br />
                Tel: 39151518, 3444 1996
                <br />
                Email: Seemashopbh@gmail.com
              </address>
            </div>
          </div>
          <div style={{ width: "100%" }}>
            <table
              style={{
                marginBottom: 0,
                fontFamily: "Poppins, sans-serif",
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400,
                border: "1px solid #dee2e6",
                width: "100%",
                verticalAlign: "top",
                borderSpacing: 0,
              }}
            >
              <thead
                style={{
                  verticalAlign: "bottom",
                  borderColor: "inherit",
                  borderStyle: "solid",
                  borderWidth: 0,
                }}
              >
                <tr
                  style={{
                    borderColor: "inherit",
                    borderStyle: "solid",
                    borderWidth: 0,
                    backgroundColor: "#f8f9fa",
                  }}
                >
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    <strong
                      style={{
                        fontWeight: "bolder",
                        textTransform: "uppercase",
                      }}
                    >
                      Item
                    </strong>
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    <strong
                      style={{
                        fontWeight: "bolder",
                        textTransform: "uppercase",
                      }}
                    >
                      Description
                    </strong>
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    <strong
                      style={{
                        fontWeight: "bolder",
                        textTransform: "uppercase",
                      }}
                    >
                      Type of Delivery
                    </strong>
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "center",
                    }}
                  >
                    <strong
                      style={{
                        fontWeight: "bolder",
                        textTransform: "uppercase",
                      }}
                    >
                      QTY
                    </strong>
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "right",
                    }}
                  >
                    <strong
                      style={{
                        fontWeight: "bolder",
                        textTransform: "uppercase",
                      }}
                    >
                      Amount (BHD)
                    </strong>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    Parcel
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    Delivery
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    international
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "center",
                    }}
                  >
                    10
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "right",
                    }}
                  >
                    36.000
                  </td>
                </tr>
                <tr>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    Parcel
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    Delivery
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                    }}
                  >
                    Next Day
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "center",
                    }}
                  >
                    233
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "right",
                    }}
                  >
                    163.100
                  </td>
                </tr>
                <tr style={{ backgroundColor: "#f8f9fa" }}>
                  <td
                    colSpan={3}
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                    }}
                  />
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "right",
                      textTransform: "uppercase",
                    }}
                  >
                    <strong style={{ fontWeight: "bolder" }}>Sub Total:</strong>
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "right",
                    }}
                  >
                    199.100
                  </td>
                </tr>
                <tr style={{ backgroundColor: "#f8f9fa" }}>
                  <td
                    colSpan={3}
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                    }}
                  />
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "right",
                      textTransform: "uppercase",
                    }}
                  >
                    <strong style={{ fontWeight: "bolder" }}>VAT:</strong>
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      borderBottomWidth: 1,
                      textAlign: "right",
                    }}
                  >
                    ---
                  </td>
                </tr>
                <tr style={{ backgroundColor: "#f8f9fa" }}>
                  <td
                    colSpan={3}
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                    }}
                  />
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      textAlign: "right",
                      textTransform: "uppercase",
                    }}
                  >
                    <strong style={{ fontWeight: "bolder" }}>Total:</strong>
                  </td>
                  <td
                    style={{
                      padding: "8px 15px",
                      borderColor: "inherit",
                      borderStyle: "solid",
                      borderWidth: 0,
                      textAlign: "right",
                      color: "#752F8A",
                      fontWeight: 700,
                    }}
                  >
                    199.100
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </main>
        {/* Footer */}
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            alignItems: "end",
            marginTop: 35,
            padding: "0 15px",
          }}
        >
          <div
            style={{
              width: "50%",
              fontFamily: "Poppins, sans-serif",
              fontSize: 14,
              lineHeight: 22,
            }}
          >
            <p style={{ margin: 0, color: "#752F8A" }}>Make Payments to:</p>
            <address style={{ fontStyle: "normal", lineHeight: 22 }}>
              Bank Name: <strong style={{ fontWeight: 500 }}>BBK</strong>
              <br />
              Account Name:{" "}
              <strong style={{ fontWeight: 500 }}>
                INTERCITY EXPRESS CARGO CO. WLL
              </strong>
            </address>
          </div>
          <div
            style={{
              width: "50%",
              textAlign: "right",
              fontFamily: "Poppins, sans-serif",
              fontSize: 14,
              lineHeight: 22,
            }}
          >
            <address style={{ fontStyle: "normal", lineHeight: 22 }}>
              Account Number:{" "}
              <strong style={{ fontWeight: 500 }}>100000428320</strong>
              <br />
              IBAN-BH:{" "}
              <strong style={{ fontWeight: 500 }}>
                BH22-BBKU-0010-0000-4283-20
              </strong>
            </address>
          </div>
          <div
            style={{
              width: "100%",
              fontFamily: "Poppins, sans-serif",
              fontSize: 14,
              lineHeight: 22,
              margin: "30px 0",
            }}
          >
            <address style={{ fontStyle: "normal", lineHeight: 22 }}>
              Make all cheques payable to INTERCITY EXPRESS CARGO CO. WLL
              <br />
              If you have any questions concerning this invoice, call :{" "}
              <strong style={{ fontWeight: 500 }}>3717 2727</strong>, E-mail:{" "}
              <strong style={{ fontWeight: 500 }}>accounts@delybell.com</strong>
              <br />
              *This is computer generated invoice no signature required
            </address>
          </div>
        </div>
        <footer>
          <div
            style={{
              width: "100%",
              padding: "0.75rem 1.25rem",
              backgroundColor: "rgba(0, 0, 0, 0.03)",
              border: "1px solid rgba(0, 0, 0, 0.125)",
              textAlign: "center",
            }}
          >
            <strong style={{ fontWeight: "bolder", color: "#752F8A" }}>
              Thank you for your bussiness!
            </strong>
          </div>
        </footer>
      </div>
    </>
  );
};

export default Invoice;