import Breadcrumb from "../../../../src/components/Breadcrumbs/Breadcrumb";
import { InvoiceTable } from "../../../../src/components/Tables/invoice-table";
import { TopChannels } from "../../../../src/components/Tables/top-channels";
import { TopChannelsSkeleton } from "../../../../src/components/Tables/top-channels/skeleton";
import { TopProducts } from "../../../../src/components/Tables/top-products";
import { TopProductsSkeleton } from "../../../../src/components/Tables/top-products/skeleton";

import { Metadata } from "next";
import { Suspense } from "react";

export const metadata: Metadata = {
  title: "Tables",
};

const TablesPage = () => {
  return (
    <>
      <Breadcrumb pageName="Tables" />

      <div className="space-y-10">
        <Suspense fallback={<TopChannelsSkeleton />}>
          <TopChannels />
        </Suspense>
        
        <Suspense fallback={<TopProductsSkeleton />}>
          <TopProducts />
        </Suspense>

        <InvoiceTable />
      </div>
    </>
  );
};

export default TablesPage;