import { Html } from "@react-three/drei";
import React from "react";
import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
import { Vector3 } from "three";

type RoboticArmContentUiProps = {
  roboticArm: ArmBotStatus;
};

const RoboticArmContentUi: React.FC<RoboticArmContentUiProps> = ({ roboticArm }) => {
  return (
    <Html
      // data
      position={
        new Vector3(
          roboticArm.position[0],
          roboticArm.point.position[1],
          roboticArm.position[2]
        )
      }
      // class none
      // other
      zIndexRange={[1, 0]}
      prepend
      sprite
      center
      distanceFactor={20}
    >
      <AssetDetailsCard name={roboticArm.modelName} status={roboticArm.state} activeTime={roboticArm.activeTime}/>
    </Html>
  );
};

export default RoboticArmContentUi;
