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

type Props = {
	redirectUrl: string;
	onRedirectUrlChange: (url: string) => void;
};

const RedirectAction = ({ redirectUrl, onRedirectUrlChange }: Props) => {
	return (
		<div className="contentgate-title-body-pair contentgate-rule-action-input-container cgra-redirect-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">
					{__("Redirection URL", "contentgate")}
				</span>
			</label>
			<div className="contentgate-body flex-1 w-full md:w-auto">
				<input
					type="url"
					className="contentgate-input w-full !border-border focus:!shadow-none focus:!outline-none focus:!border-primary !min-h-[38px]"
					value={redirectUrl || ""}
					onChange={(e) => onRedirectUrlChange(e.target.value)}
					placeholder={__(
						"Enter a URL to redirect to...",
						"contentgate",
					)}
				/>
			</div>
		</div>
	);
};

export default RedirectAction;