import React from "react";
import { GlobalContext, showToast } from "@/context/Global";
import { operatorMap, operators } from "@/utils/constants";

const IfOperators = ({ onSelect, selected }) => {
  // if(5>=10) {

  // }
  return (
    <>
      <div className="flex w-full flex-wrap gap-3">
        {operators.map((operator, index) => (
          <button
            onClick={() => onSelect(operator)}
            key={index + 1}
            className={`${
              selected === operator ? "bg-primaryBlue text-white" : ""
            } w-fit min-w-[3rem] max-w-fit rounded-md border border-primaryBlue p-1 lowercase  hover:bg-primaryBlue  hover:text-white`}
          >
            {operatorMap[operator]}
          </button>
        ))}
      </div>
    </>
  );
};

export default IfOperators;
