import { __ } from "@wordpress/i18n";
import React from "react";
import AddNewRestriction from "./AddNewRestriction";
import { Rule } from "../../types";
import Filters from "./Filters";
import { isProAccess } from "../../utils/localized-data";
import { Button } from "../ui/Button";
import { Plus } from "lucide-react";

type Props = {
	handleRuleCreated?: (newRule: Rule) => void;
	search: string;
	setSearch: React.Dispatch<React.SetStateAction<string>>;
	status: { label: string; value: string };
	setStatus: React.Dispatch<
		React.SetStateAction<{ label: string; value: string }>
	>;
	statusOptions: { label: string; value: string }[];
	rules: Rule[];
};

const RestrictionPageHeader = ({
	handleRuleCreated,
	search,
	setSearch,
	status,
	setStatus,
	statusOptions,
	rules,
}: Props) => {
	return (
		<div className="flex items-center justify-between gap-4 mb-8 flex-wrap">
			<div className="flex items-center gap-4">
				<h1 className="h-full !m-0 leading-[38px] text-[22px] font-semibold text-black-450">
					{__("Content Rules", "contentgate")}
				</h1>
				<AddNewRestriction
					onCreateSuccess={handleRuleCreated}
					rules={rules}
				/>
			</div>
			<Filters
				search={search}
				setSearch={setSearch}
				status={status}
				setStatus={setStatus}
				statusOptions={statusOptions}
				rules={rules}
			/>
		</div>
	);
};

export default RestrictionPageHeader;