import React from "react";
import {
  CartIcon,
  DocumentIcon,
  GlobeIcon,
  WalletIcon,
} from "../../../../icons/3dChartIcons";
import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";

import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";

const WidgetsFloating = () => {
  return (
    <div className="floatingWidgets-wrapper widgets-wrapper">
      {/* Floating 1 */}
      <SimpleCard
        header={"Today’s Earnings"}
        icon={WalletIcon}
        iconName={"WalletIcon"}
        value={"$53,000"}
        per={"+55%"}
      />
      <SimpleCard
        header={"Today’s Users"}
        icon={GlobeIcon}
        iconName={"GlobeIcon"}
        value={"1,200"}
        per={"+30%"}
      />
      <SimpleCard
        header={"New Clients"}
        icon={DocumentIcon}
        iconName={"DocumentIcon"}
        value={"250"}
        per={"+12%"}
      />
      <SimpleCard
        header={"Total Sales"}
        icon={CartIcon}
        iconName={"CartIcon"}
        value={"$150,000"}
        per={"+20%"}
      />{" "}
      <WarehouseThroughput />
      {/* <ProductivityDashboard /> */}
      <FleetEfficiency />
    </div>
  );
};

export default WidgetsFloating;