import React from "react";

interface SimpleCardProps {
  header: string;
  icon: React.ElementType; // React component for SVG icon
  iconName?: string;
  value: string;
  per: string; // Percentage change
  position?: [number, number];
}

const SimpleCard: React.FC<SimpleCardProps> = ({
  header,
  icon: Icon,
  iconName,
  value,
  per,
  position = [0, 0],
}) => {
  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect(); // Get position

    const cardData = JSON.stringify({
      header,
      value,
      per,
      iconName: iconName || "UnknownIcon", // Use the custom iconName
      className: event.currentTarget.className,
      position: [rect.top, rect.left], // ✅ Store position
    });

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

  return (
    <div
      className="floating total-card"
      draggable
      onDragStart={handleDragStart}
      style={{ top: position[0], left: position[1] }} // No need for ?? 0 if position is guaranteed
    >
      <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;
