import React from "react";
import { useCollapsed } from "@/components/Context/CollapsedContext"; 

import Layout from "@/components/layouts/Layout";
import CreateQuote from "@/components/dashboard/CreateQuote";
import RecentSpotQuotes from "@/components/dashboard/RecentSpotQuotes";
import { getPorts } from "@/services/dashboard";
import MarketInsights from "@/components/ui/customerDashboard/market-Insights";
import CustomerRates from "@/components/ui/customerDashboard/customer-rates";
interface Props {
  breadcrumbs: {
    title: string;
    path: string;
  }[];
  daysOutAvgCapacity: {
    name: string;
    value: number;
  }[];
  ports: {
    id: number;
    name: string | null;
    state_code: string | null;
  }[];
}

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

  return (
    <Layout>
      <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body'}`}>
        <div className="row my-5">
          <div className="col-lg-4">
            <CreateQuote ports={props.ports} />
          </div>
          <div className="col-lg-8">
            <RecentSpotQuotes breadcrumbs={[]} datalisting={undefined} />
          </div>
        </div>
        <div className="row">
          <div className="col-lg-4">
            <MarketInsights />
          </div>
          <div className="col-lg-8">
            <CustomerRates />
          </div>
        </div>
      </div>
    </Layout>
  );
}
export async function getServerSideProps(context: any) {
  const portsData = await getPorts();
  return {
    props: {
      breadcrumbs: [
        {
          title: "Dashboard",
          path: "/dashboard",
        },
      ],
      ports: portsData.data,
    },
  };
}
export default CustomerDashboard;