import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
import RearCameraOverviewCard from "../components/RearCameraOverview/RearCameraOverviewCard";
import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
import { CAM_BASE } from "../utils/config";
const Dashboard = () => {
  // const AGX_url = import.meta.env.VITE_AGX_BOX_URL;
  // const AGX_rear_url = import.meta.env.VITE_AGX_BOX_REAR_UR;
  // const test = import.meta.env.VITE_LOCAL;
  const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`;
  const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
  // const testFront = import.meta.env.VITE_LOCAL_FRONT;
  console.log(CAM_BASE);

  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={dev_FRONT_URL} side="Front">
        <FrontCameraOverviewCard className="order-1" />
        <SightingHistoryWidget
          className="order-3"
          title="Front Camera Sightings"
        />
      </SightingFeedProvider>

      <SightingFeedProvider url={dev_REAR_URL} side="Rear">
        <RearCameraOverviewCard className="order-2" />
        <SightingHistoryWidget
          className="order-4"
          title="Rear Camera Sightings"
        />
      </SightingFeedProvider>
    </div>
  );
};

export default Dashboard;