const Breadcrumbs = dynamic(() => import("@/CommonComponent/Breadcrumbs"), { ssr: false })
import { Ecommerce, Invoice } from "@/Constant";
import { Container, Table } from "reactstrap";
import { InvoiceButtons } from "../Common/InvoiceButtons";
import { InvoiceHeadSection } from "./InvoiceHeadSection";
import { InvoiceDateSection } from "./InvoiceDateSection";
import { InvoiceAddressSection } from "./InvoiceAddressSection";
import { InvoiceTableHead } from "./InvoiceTableHead";
import { InvoiceTableBody } from "./InvoiceTableBody";
import { InvoiceTexSection } from "./InvoiceTexSection";

const InvoiceTwoContainer = () => {
  return (
    <>
      <Breadcrumbs pageTitle={`${Invoice}-2`} parent={Ecommerce} />
      <Container fluid className="invoice-2-wrapper">
        <Table borderless style={{ width: 1160, margin: "5px auto" }} className="mb-4">
          <tbody>
            <tr>
              <InvoiceHeadSection />
            </tr>
            <tr>
              <InvoiceDateSection />
            </tr>
            <tr>
              <InvoiceAddressSection />
            </tr>
            <tr>
              <td className="p-0">
                <Table borderless style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0, border: "1px solid rgba(82, 82, 108, 0.1)" }}>
                  <InvoiceTableHead />
                  <InvoiceTableBody />
                </Table>
              </td>
            </tr>
            <tr>
              <InvoiceTexSection />
            </tr>
          </tbody>
        </Table>
      </Container>
      <InvoiceButtons />
    </>
  );
};

export default InvoiceTwoContainer;