/* eslint-disable react-hooks/rules-of-hooks */
import Breadcrumb from "@/components/ui/pages/Breadcrumb";
import { Row, Col } from "react-bootstrap";
import ProtectedRoute from "@/ProtectedRoute";

/* eslint-disable react-hooks/rules-of-hooks */
import React from "react";
import Layout from "@/components/layouts/Layout";
import Head from "next/head";
import ClaimRequestTable from "@/components/ui/claim-request/ClaimRequestTable";
import { useCollapsed } from "@/components/Context/CollapsedContext"; 

interface Props {
  datacordinates: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
  cordinates: any;
  Carriesdata: any;
}

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

  return (
    <Layout>
      <Head>
        <title>Manage Claim Request - Draydex</title>
      </Head>
      <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body'}`}>
        <Row className="page-titles mx-0">
          <Col className="p-md-0">
            <Breadcrumb breadcrumbs={props?.breadcrumbs} />
          </Col>
        </Row>
        <Row>
          <Col>
            <ClaimRequestTable />
          </Col>
        </Row>
      </div>
    </Layout>
  );
}

export async function getServerSideProps(context: any) {
  return {
    props: {
      breadcrumbs: [
        {
          title: "Dashboard",
          path: "/dashboard",
        },
        {
          title: "Claim Request",
          path: "/claim-request",
        },
      ],
    },
  };
}
export default ProtectedRoute(Index);
