/**
 * PermissionPrompt asks the user to approve or reject a sensitive agent
 * action, offering exactly the options the agent proposed (allow once,
 * always, reject, ...), like Zed's permission bar.
 *
 * @example
 * <PermissionPrompt
 *   request={{ requestId: "perm-1", title: "Run `make test`", options: [
 *     { optionId: "allow", name: "Allow", kind: "allow_once" }] }}
 *   onRespond={(requestId, optionId) => console.log(requestId, optionId)}
 * />
 */

import type { PermissionRequestState } from "../reducer";
import { InlineText } from "./InlineText";

interface PermissionPromptProps {
	request: PermissionRequestState;
	onRespond: (requestId: string, optionId: string) => void;
}

export function PermissionPrompt({
	request,
	onRespond,
}: PermissionPromptProps) {
	return (
		<div
			className="permission"
			role="alertdialog"
			aria-label="permission request"
		>
			<p className="permission-title">
				🔐 <InlineText text={request.title} />
			</p>
			<div className="permission-options">
				{request.options.map((option) => (
					<button
						key={option.optionId}
						type="button"
						className={`permission-option permission-${option.kind}`}
						onClick={() => onRespond(request.requestId, option.optionId)}
					>
						{option.name}
					</button>
				))}
			</div>
		</div>
	);
}