import React, { useState } from "react";

import { LazyLoad } from "@/components/LazyLoad";
import { GlobalContext, setGLobalProperty } from "@/context/Global";

import { ScaleModalOverlay } from "@/components/ScaleModalOverlay";
import { MkdButton } from "@/components/MkdButton";

const RouteIfControlCondition = ({}) => {
  const {
    dispatch: globalDispatch,
    state: { selectedRoute, configModalOpen },
  } = React.useContext(GlobalContext);

  return (
    <div className="mt-2 w-full">
      <div className="relative mb-2 flex h-10 w-full min-w-full  justify-between rounded-md">
        <div className={`h-full w-[40%]`}>
          <input
            type="test"
            id="text-area"
            className="h-full w-full  resize-none appearance-none overflow-scroll break-words rounded border-2 px-2 leading-[.9375rem] focus:outline-none focus:ring-0"
            data-gramm="false"
            autofill="do-not-autofill"
            spellcheck="false"
            placeholder="{{$var.example}}"
            // style="height: 2.125rem;"
          />
        </div>

        <div className="flex h-full w-[18%] items-center justify-start gap-1 px-1">
          <span className="h-full py-1">is</span>
          <span className="h-full grow py-1">equal</span>
        </div>
        <div className={`h-full w-[40%]`}>
          <input
            type="test"
            id="text-area"
            className="h-full w-full  resize-none appearance-none overflow-scroll break-words rounded border-2 px-2 leading-[.9375rem] focus:outline-none focus:ring-0"
            data-gramm="false"
            autofill="do-not-autofill"
            spellcheck="false"
            placeholder="{{$var.example}}"
            // style="height: 2.125rem;"
          />
        </div>
      </div>
    </div>
  );
};

export default RouteIfControlCondition;
