import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
import RearCameraOverviewCard from "../components/RearCameraOverview/RearCameraOverviewCard";
import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
import ModalComponent from "../components/UI/ModalComponent";
import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";

const Dashboard = () => {
  return (
    <div className="mx-auto grid grid-cols-1  sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
      <SightingFeedProvider
        url={
          "http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef="
          // "http://192.168.75.11/SightingListFront/sightingSummary?mostRecentRef="
        }
        side="Front"
      >
        <FrontCameraOverviewCard className="order-1" />
        <SightingHistoryWidget className="order-5" />
        <ModalComponent>
          <div className="text-black">Hello</div>
        </ModalComponent>
      </SightingFeedProvider>

      <SightingFeedProvider
        url={
          "http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef="
          // "http://192.168.75.11/SightingListRear/sightingSummary?mostRecentRef="
        }
        side="Rear"
      >
        <RearCameraOverviewCard className="order-2" />
        <SightingHistoryWidget className="order-4" />
      </SightingFeedProvider>
    </div>
  );
};

export default Dashboard;