import React from "react";
import { KebabIcon } from "@/assets/svgs";
import { LazyLoad } from "@/components/LazyLoad";
import { VariableVariables } from "./VariableVariables";
import { ActionVariables } from "./ActionVariables";
import { ModelVariables } from "./ModelVariables";
import { RoleVariables } from "./RoleVariables";
import { MkdPopover } from "@/components/MkdPopover";

const DropdownVariables = ({ className, variables, onSelect }) => {
  return (
    <MkdPopover
      className={className}
      display={`{ }`}
      tooltipClasses={`flex w-[25rem] !bg-black min-w-[25rem] flex-wrap flex-col !gap-2 whitespace-nowrap rounded-lg border-none bg-black p-2 text-sm  text-white shadow-md shadow-primaryBlue`}
    >
      {/* <LazyLoad>
        <button
          className={`peer h-fit w-fit rounded-md bg-gray-600 px-1 text-lg font-bold ${className}`}
        >{`{ }`}</button>
      </LazyLoad> */}
      {/* <div className=" "> */}
      <LazyLoad>
        <VariableVariables variables={variables} onSelect={onSelect} />
      </LazyLoad>
      <LazyLoad>
        <ActionVariables variables={variables} onSelect={onSelect} />
      </LazyLoad>
      <LazyLoad>
        <ModelVariables variables={variables} onSelect={onSelect} />
      </LazyLoad>
      <LazyLoad>
        <RoleVariables variables={variables} onSelect={onSelect} />
      </LazyLoad>
      {/* </div> */}
    </MkdPopover>
  );
};

export default DropdownVariables;
// className="absolute inset-x-0 bottom-auto top-full z-[9999999999] hidden w-[25rem] min-w-[25rem] flex-col gap-2 whitespace-nowrap rounded-lg border-none bg-black  p-2 text-sm  text-white shadow-md shadow-primaryBlue hover:flex focus:block peer-focus:flex peer-focus-visible:flex"
