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

type StorageContentUiProps = {
  storageUnit: StorageUnitStatus;
};

const StorageContentUi: React.FC<StorageContentUiProps> = ({ storageUnit }) => {
  return (
    <Html
      // data
      position={
        new Vector3(
          storageUnit.position[0],
          storageUnit.point.position[1],
          storageUnit.position[2]
        )
      }
      // class none
      // other
      zIndexRange={[1, 0]}
      prepend
      sprite
      center
      distanceFactor={20}
    >
      <AssetDetailsCard
        name={storageUnit.modelName}
        status={storageUnit.state}
        count={storageUnit.currentLoad}
        enableStatue={false}
        totalCapacity={storageUnit.point.action.storageCapacity}
      />
    </Html>
  );
};

export default StorageContentUi;
