const FleetEfficiency = () => {
  const progress = 75; // Example progress value (0-100)

  // Calculate the rotation angle for the progress bar
  const rotationAngle = -90 + progress * 3.6; // Progress starts from the left (-90°)

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect(); // Get position

    const cardData = JSON.stringify({
      className: event.currentTarget.className,
      position: [rect.top, rect.left], // Store position
      value: rotationAngle, // Example value (you can change if dynamic)
      per: progress,

    });
    event.dataTransfer.setData("text/plain", cardData);
  };


  return (
    <div className="fleetEfficiency floating" draggable onDragStart={handleDragStart}>
      <h2 className="header">Fleet Efficiency</h2>

      <div className="progressContainer">
        <div className="progress">
          <div className="barOverflow">
            {/* Apply dynamic rotation to the bar */}
            <div
              className="bar"
              style={{ transform: `rotate(${rotationAngle}deg)` }}
            ></div>
          </div>
        </div>
      </div>

      <div className="scaleLabels">
        <span>0%</span>
        <div className="centerText">
          <div className="percentage">{progress}%</div>
          <div className="status">Optimal</div>
        </div>
        <span>100%</span>
      </div>
    </div>
  );
};

export default FleetEfficiency;