import Layout from "@/components/layouts/Layout";
import { useCollapsed } from "@/components/Context/CollapsedContext"; 

import Head from "next/head";
import Breadcrumb from "@/components/ui/pages/Breadcrumb";
import { getServerSession } from "next-auth/next";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import CustomerTable from "@/components/ui/customerDashboard/CustomerTable";
import ProtectedRoute from "@/ProtectedRoute";
interface Props {
  breadcrumbs: {
    title: string;
    path: string;
  }[];
  session: any;
}

function Index(props: Props) {
  const { isCollapsed } = useCollapsed(); 

  return (
    <Layout>
      <Head>
        <title>Customers - Draydex</title>
      </Head>
      <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body'}`}>
        <div className="row page-titles mx-0">
          <div className="col p-md-0">
            <Breadcrumb breadcrumbs={props.breadcrumbs} />
          </div>
        </div>
        <div className="row">
          <CustomerTable />
        </div>
      </div>
    </Layout>
  );
}

export async function getServerSideProps(context: any) {
  const session = await getServerSession(context.req, context.res, authOptions);
  return {
    props: {
      breadcrumbs: [
        {
          title: "Dashboard",
          path: "/dashboard",
        },
        {
          title: "Customers",
          path: "/customers",
        },
      ],
      session: session,
    },
  };
}

export default ProtectedRoute(Index as any);
