import React from "react";
import { getContentGateData } from "../../../utils/localized-data";
import { __ } from "@wordpress/i18n";

type Props = {
	localPage: string;
	onLocalPageChange: (value: string) => void;
};

const LocalPageAction = ({ localPage, onLocalPageChange }: Props) => {
	const pages = getContentGateData("pages_for_redirect", {});
	const pageOptions: { value: string; label: string }[] = Object.entries(
		pages,
	).map(([id, title]) => ({
		value: id,
		label: title as string,
	}));

	return (
		<div className="contentgate-title-body-pair contentgate-rule-action-input-container cgra-redirect-to-local-page-input-container flex gap-6 items-start md:items-center flex-col md:flex-row">
			<label className="contentgate-label-container max-w-[300px] w-full">
				<span className="contentgate-target-content-label text-sm font-medium">
					{__("Redirect to a local page", "contentgate")}
				</span>
			</label>
			<div className="contentgate-body flex-1 w-full md:w-auto">
				<select
					className="contentgate-input !max-w-full w-full !text-sm text-black-450 hover:!text-black-450 !border-border focus:!shadow-none focus:!outline-none focus:!border-primary !min-h-[38px]"
					value={localPage || ""}
					onChange={(e) => onLocalPageChange(e.target.value)}
				>
					<option value="">
						{__("Select a page", "contentgate")}
					</option>
					{pageOptions.map((page) => (
						<option key={page.value} value={page.value}>
							{page.label}
						</option>
					))}
				</select>
			</div>
		</div>
	);
};

export default LocalPageAction;