import Image from "next/image";
import { useRef, useState } from "react";
import {motion} from "framer-motion"

export default function DraggableComponentsContainer({
  content,
}: {
  content: {context:string}[] | undefined;
}) {
  if (content === undefined) return null;
  return (
    <div className="flex flex-col gap-10">
      {content.map((i) => {
        return (
          <DraggableComponents
            content={i.context}
          />
        );
      })}
    </div>
  );
}

function DraggableComponents({
  content,
}: {content: string}) {
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    setIsDragging(true);
    if (containerRef.current) {
      // Serialize the children as a string for dataTransfer
      const childrenHtml = containerRef.current.innerHTML;
      event.dataTransfer.setData("text/html", childrenHtml);
    }
  };

  const handleDragEnd = () => {
    setIsDragging(false);
  };

  return (
    <motion.div
      initial={{opacity: 0, y: 5}}
      animate={{opacity: 1, y: 0}}
      ref={containerRef}
      onDragEnd={handleDragEnd}
      onDragStart={handleDragStart}
      draggable
      className={`flex gap-4 px-3 overflow-hidden rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
    >
      <div className="flex flex-col gap-2">
        <div>
          <h1 className="line-clamp-3">{content}</h1>
        </div>
        {/* <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p> */}
      </div>
    </motion.div>
  );
}