import Layout from "@/components/layouts/Layout";
import Head from "next/head";
import { getServerSession } from "next-auth/next";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import ProtectedRoute from "@/ProtectedRoute";
import UserDetails from "@/components/ui/users/UserDetails";
import { useCollapsed } from "@/components/Context/CollapsedContext"; 

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

  return (
    <Layout>
      <Head>
        <title>User details - Draydex</title>
      </Head>
      <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body'}`}>
        <div className="row page-titles mx-0">
          <div className="col p-md-0"></div>
        </div>
        <div className="row">
          <UserDetails />
        </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: "Users Details",
          path: "user-details",
        },
      ],
      session: session,
    },
  };
}

export default ProtectedRoute(Index as any);
