/* 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 CancelRequestTable from "@/components/ui/cancel-request/CancelRequestTable";
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>
                        <CancelRequestTable />
                    </Col>
                </Row>
            </div>
        </Layout>
    );
}

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