import { __ } from "@wordpress/i18n";
import React from "react";

type Props = {
	logicGate: string;
	onLogicGateChange: (gate: string) => void;
};

const AdvancedLogicGates = ({
	logicGate = "AND",
	onLogicGateChange,
}: Props) => {
	const handleLogicGateClick = (gate: string) => {
		if (onLogicGateChange) {
			onLogicGateChange(gate);
		}
	};
	return (
		<div className="contentgate-advanced-logic-gates flex gap-6 mb-4">
			<label className="contentgate-advanced-logic-label">
				{__("Add Logic:", "contentgate")}
			</label>
			<div className="contentgate-logic-gate-buttons">
				<button
					type="button"
					className={`contentgate-logic-gate-button  px-2 py-1 rounded-full ${logicGate === "AND" ? "bg-primary text-white" : ""}`}
					onClick={() => handleLogicGateClick("AND")}
					title={__("AND", "contentgate")}
				>
					{__("AND", "contentgate")}
				</button>
				<button
					type="button"
					className={`contentgate-logic-gate-button px-2 py-1 rounded-full  ${logicGate === "OR" ? "bg-primary text-white" : ""}`}
					onClick={() => handleLogicGateClick("OR")}
					title={__("OR", "contentgate")}
				>
					{__("OR", "contentgate")}
				</button>
			</div>
		</div>
	);
};

export default AdvancedLogicGates;