import React, { useRef } from "react";
import { Card, CardBody, Container, Table } from "reactstrap";
import InvoiceHeader from "./InvoiceHeader";
import InvoiceBackImage from "./InvoiceBackImage";
import InvoiceContent from "./InvoiceContent";
import InvoiceOrder from "./InvoiceOrder";
import InvoiceSign from "./InvoiceSign";
import { useReactToPrint } from "react-to-print";
import { InvoiceButtons } from "../Common/InvoiceButtons";
import { Ecommerce, Invoice } from "@/Constant";
import dynamic from "next/dynamic";
const Breadcrumbs = dynamic(() => import("@/CommonComponent/Breadcrumbs"), { ssr: false })

const Invoice1Container = () => {
  const componentRef = useRef<HTMLDivElement | null>(null);

  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
  });

  return (
    <>
      <Breadcrumbs pageTitle={`${Invoice}-1`} parent={Ecommerce} />
      <div ref={componentRef}>
        <Container fluid>
          <Table className="table-wrapper invoice-1 invoice-1-wrapper mt-3" borderless>
            <tbody>
              <tr>
                <InvoiceHeader />
              </tr>
              <tr>
                <InvoiceBackImage />
              </tr>
              <tr>
                <InvoiceContent />
              </tr>
              <tr>
                <InvoiceOrder />
              </tr>
            </tbody>
            <tbody>
              <InvoiceSign />
            </tbody>
          </Table>
        </Container>
      </div>
      <InvoiceButtons handlePrint={handlePrint} />
    </>
  );
};

export default Invoice1Container;