import React from "react";
import Layout from "@/components/layouts/Layout";
import CreateQuote from "@/components/dashboard/CreateQuote";
import RecentSpotQuotes from "@/components/dashboard/RecentSpotQuotes";
import SpotRateAvg from "@/components/dashboard/SpotRateAvg";
import DaysOutAvgCapacity from "@/components/dashboard/DaysOutAvgCapacity";
import { getPorts } from "@/services/dashboard";
import CarrierFuel from "@/components/ui/carriersDashboard/carrier-fuel";
import ProtectedRoute from "@/ProtectedRoute";


interface Props {
  breadcrumbs: {
    title: string;
    path: string;
  }[];
  daysOutAvgCapacity: {
    name: string;
    value: number;
  }[];
  ports: {
    id: number;
    name: string | null;
    state_code: string | null;
  }[];
}

const CarriersDashboard = (props: Props) => {
  return (
    <Layout>
      <div className={`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">
            <CarrierFuel />
          </div>
          <div className="col-lg-4">
            <SpotRateAvg />
          </div>
          <div className="col-lg-4">
            <DaysOutAvgCapacity avgData={props.daysOutAvgCapacity} />
          </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 ProtectedRoute(CarriersDashboard as any);