import { Ecommerce, ImagePath, Invoice } from "@/Constant";
import { Container, Table } from "reactstrap";
import { InvoiceButtons } from "../Common/InvoiceButtons";
import InvoiceHead from "./InvoiceHead";
import InvoiceDateSection from "./InvoiceDateSection";
import InvoiceTableHead from "./InvoiceTableHead";
import InvoiceTableBody from "./InvoiceTableBody";
import InvoiceTaxSection from "./InvoiceTaxSection";
import dynamic from "next/dynamic";

const Breadcrumbs = dynamic(() => import("@/CommonComponent/Breadcrumbs"), { ssr: false })

const InvoiceFourContainer = () => {
  return (
    <>
      <Breadcrumbs pageTitle={`${Invoice}-4`} parent={Ecommerce} />
      <Container fluid>
        <Table borderless style={{ width: 1160, margin: "0 auto" }}>
          <tbody>
            <InvoiceHead />
            <InvoiceDateSection />
            <tr>
              <td className="p-0">
                <Table borderless style={{ width: "100%", borderSpacing: 0 }}>
                  <InvoiceTableHead />
                  <InvoiceTableBody />
                </Table>
              </td>
            </tr>
            <tr>
              <td style={{ height: 3, width: "100%", background: "linear-gradient(90deg, #006666 20.61%, #54BA4A 103.6%)", display: "block", padding: "0px" }} />
            </tr>
            <InvoiceTaxSection />
            <tr style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
              <td className="p-0">
                <img src={`${ImagePath}/email-template/invoice-3/sign.png`} alt="sign" />
                <span style={{ display: "block", fontSize: 18, fontWeight: 600 }}>Laurine T. Ebbert</span>
                <span style={{ display: "block", fontSize: 14, paddingTop: 5 }}>( Designer )</span>
              </td>
            </tr>
          </tbody>
        </Table>
      </Container>
      <InvoiceButtons />
    </>
  );
};

export default InvoiceFourContainer;