import widget1 from "../../../../../assets/image/3D/ProductionCapacity.png";
import widget2 from "../../../../../assets/image/3D/ReturnOfInvestment.png";
import widget3 from "../../../../../assets/image/3D/StateWorking.png";
import widget4 from "../../../../../assets/image/3D/Throughput.png";
const Widgets3D = () => {
  const widgets = [
    { name: "Widget 1", img: widget1 },
    { name: "Widget 2", img: widget2 },
    { name: "Widget 3", img: widget3 },
    { name: "Widget 4", img: widget4 },
  ];

  return (
    <div className="widgets-container widget3D">
      {widgets?.map((widget, index) => (
        <div key={index} className="widget-item" draggable>
          <div className="widget-name">{widget.name}</div>
          <img
            className="widget-image"
            src={widget.img}
            alt={widget.name}
            draggable={false}
          />
        </div>
      ))}
    </div>
  );
};

export default Widgets3D;