import React from "react";

interface SimpleCardProps {
  header: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
  value: string;
  per: string; // Percentage change
}

const SimpleCard: React.FC<SimpleCardProps> = ({
  header,
  icon: Icon,
  value,
  per,
}) => {

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    const cardData = JSON.stringify({
      header,
      value,
      per,
      className: event.currentTarget.className, 
    });
  
    console.log("Dragging Data:", cardData); // ✅ Debugging log
  
    event.dataTransfer.setData("text/plain", cardData);
  };

  return (
    <div className="floating total-card" draggable onDragStart={handleDragStart}>
      <div className="header-wrapper">
        <div className="header">{header}</div>
        <div className="data-values">
          <div className="value">{value}</div>
          <div className="per">{per}</div>
        </div>
      </div>

      <div className="icon">
        <Icon />
      </div>
    </div>
  );
};

export default SimpleCard;