import React from "react";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "../../ui/Dialog";
import { CirclePlus } from "lucide-react";
import { __ } from "@wordpress/i18n";
import { Button } from "../../ui/Button";

type Props = {
	isOpen: boolean;
	setIsOpen: (isOpen: boolean) => void;
};

const AdvancedLogicWarningModal = ({ isOpen, setIsOpen }: Props) => {
	return (
		<Dialog open={isOpen} onOpenChange={setIsOpen}>
			<DialogContent>
				<DialogHeader>
					<DialogTitle className="flex items-center">
						<CirclePlus className="inline mr-2" />
						{__("Remove Advanced Logic First", "contentgate")}
					</DialogTitle>
					<DialogDescription className="mt-4">
						<p className="contentgate-modal-message">
							{__(
								"You're currently using OR, or subgroups for this rule. Please remove these first, then you can disable Advanced Logic. When disabled, only AND will be used for multiple conditions",
								"contentgate",
							)}
						</p>
					</DialogDescription>
				</DialogHeader>
				<DialogFooter className="bg-gray-100">
					<Button
						type="button"
						className="py-5 w-full"
						size="lg"
						onClick={() => {
							setIsOpen(false);
						}}
					>
						{__("OK", "contentgate")}
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
};

export default AdvancedLogicWarningModal;