import React from "react";
import { LazyLoad } from "@/components/LazyLoad";

const ActionVariables = ({ variables = null, onSelect }) => {
  return (
    <>
      <div>Actions</div>
      <div className="flex flex-wrap items-center justify-start gap-2">
        <button
          className="flex w-fit cursor-pointer items-center gap-3 rounded-md border border-primaryBlue p-1 lowercase  hover:bg-primaryBlue  hover:text-white"
          // onClick={() => {
          //   if (onSelect) {
          //     onSelect(
          //       `{{$var.${parentVariable.action_name}.${variable?.name}}}`
          //     );
          //   }
          // }}
        >
          {"{{$actions."}
          {"}}"}
        </button>
        {variables && variables?.actions && variables?.actions?.length ? (
          <>
            {variables?.actions.map((variable) => (
              <button
                key={variable.id}
                className="flex cursor-pointer items-center gap-3 rounded-md border border-primaryBlue p-1 lowercase  hover:bg-primaryBlue  hover:text-white"
                onClick={() => {
                  if (onSelect) {
                    onSelect(`{{$actions.${variable?.action_name}}}`);
                  }
                }}
              >
                {"{{$actions."}
                {variable?.action_name}
                {"}}"}
              </button>
            ))}
          </>
        ) : null}
      </div>
    </>
  );
};

export default ActionVariables;
