import React from "react";
import VehicleInstance from "./instance/vehicleInstance";
import VehicleContentUi from "../../ui3d/VehicleContentUi";
import { useSceneContext } from "../../../scene/sceneContext";
import { useViewSceneStore } from "../../../../store/builder/store";

function VehicleInstances() {
  const { vehicleStore } = useSceneContext();
  const { vehicles } = vehicleStore();
  const { viewSceneLabels } = useViewSceneStore();

  return (
    <>
      {vehicles.map((vehicle: VehicleStatus) => (
        <React.Fragment key={vehicle.modelUuid}>
          <VehicleInstance agvDetail={vehicle} />
          {viewSceneLabels && <VehicleContentUi vehicle={vehicle} />}
        </React.Fragment>
      ))}
    </>
  );
}

export default VehicleInstances;