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

type MachineContentUiProps = {
  machine: MachineStatus;
};

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

export default MachineContentUi;
