import { Html } from "@react-three/drei";
// import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps {
  position: [number, number, number];
}
const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
  const datas = [
    { key: "Oil Tank:", value: "24/341" },
    { key: "Oil Refin:", value: 36.023 },
    { key: "Transmission:", value: 36.023 },
    { key: "Fuel:", value: 36732 },
    { key: "Power:", value: 1300 },
    { key: "Time:", value: 13 - 9 - 2023 },
  ];
  return (
    <Html position={[position[0], position[1], position[2]]}
      scale={[0.5, 0.5, 0.5]}
      transform
      sprite>
      <div className="stateWorking-wrapper card">
        <div className="header-wrapper">
          <div className="header">
            <span>State</span>
            <span>
              Working <span>.</span>
            </span>
          </div>
          <div className="img">
            {/* <img src={image} alt="" /> */}
          </div>
        </div>
        {/* Data */}
        <div className="data-wrapper">
          {datas.map((data, index) => (
            <div className="data-table" key={index}>
              <div className="data">{data.key}</div>
              <div className="key">{data.value}</div>
            </div>
          ))}
        </div>
      </div>
    </Html>
  );
};

export default StateWorking;


