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

const VariableVariables = ({ variables = null, onSelect }) => {
  return (
    <>
      <div>Variables</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}}}`
          //     );
          //   }
          // }}
        >
          {"{{$var."}
          {"}}"}
        </button>
        {variables && variables?.var && variables?.var?.length ? (
          <>
            <div className="flex flex-wrap items-center justify-start gap-2">
              {variables.var.map((parentVariable) => (
                <div
                  key={parentVariable.id}
                  className="flex flex-wrap items-center justify-start gap-2"
                >
                  {parentVariable.variables.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(
                            `{{$var.${parentVariable.action_name}.${variable?.name}}}`
                          );
                        }
                      }}
                    >
                      {"{{$var."}
                      {parentVariable.action_name}.{variable?.name}
                      {"}}"}
                    </button>
                  ))}
                </div>
              ))}
            </div>
          </>
        ) : null}
      </div>
    </>
  );
};

export default VariableVariables;
