import { classNames, useUniqueId } from "@/components/lib/utils";
import { useEdgebrix } from "@/hooks/index";
import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
import clsx from "clsx";
import { Handle, Position, useReactFlow } from "reactflow";
import styles from "./BasicNode.module.css";

function BasicNode({ data }: { data: any }) {
  const action = data.action;

  const { edgebrix, setEdgebrix } = useEdgebrix();

  return (
    <>
      <Handle type="target" position={Position.Left} />

      <div
        // onClick={() => {
        //   const { fitView } = edgebrix || useReactFlow();
        //   fitView();
        //   console.log("click");
        // }}
        key={useUniqueId()}
        className={clsx(
          styles.NodeBackgournd,
          "bg-transparent w-48 h-16 relative flex items-center space-x-3  px-2 py-5 shadow-sm"
        )}
      >
        <div className="flex-shrink-0">
          <img
            className="h-10 w-10 rounded-full"
            src={`https://res.cloudinary.com/dhwxfvlrn/image/fetch/w_100,h_100,f_auto,q_auto,dpr_2/${action.logo_url}`}
            alt=""
          />
        </div>
        <div className="min-w-0 flex-1">
          <a href="#" className="focus:outline-none">
            <p className="text-sm font-medium text-gray-900">{action.name}</p>
            <p className="truncate text-sm text-gray-500">
              {action.description}
            </p>
          </a>
        </div>
      </div>

      <Handle type="source" position={Position.Right} id="a" />
    </>
  );
}

export { BasicNode };
