import type { ReactNode } from "react";
import { Button } from "@/components/ui/button";

interface DialogFooterProps {
	onCancel: () => void;
	cancelLabel?: string;
	onConfirm: () => void;
	confirmLabel: string;
	confirmBusyLabel?: string;
	confirmDisabled?: boolean;
	confirmColor?: "primary" | "error" | "warning" | "success" | "inherit";
	confirmVariant?: "contained" | "outlined" | "text";
	confirmStartIcon?: ReactNode;
	secondaryAction?: ReactNode;
}

/**
 * Resolve the legacy MUI color/variant props onto a shadcn Button variant so
 * the exported API stays unchanged for consuming pages (ConfirmDialog here,
 * plus Dashboard/Settings/Actions in later slices).
 */
function resolveConfirmVariant(
	color: DialogFooterProps["confirmColor"],
	variant: DialogFooterProps["confirmVariant"],
): "default" | "outline" | "ghost" | "destructive" {
	if (color === "error") return "destructive";
	if (variant === "outlined") return "outline";
	if (variant === "text") return "ghost";
	return "default";
}

/**
 * Dialog action row: cancel + optional secondary action + confirm.
 *
 * Renders a horizontal Button row (`flex flex-row items-center gap-2`).
 * Preserves cancel/confirm/secondary-action props and the busy/disabled label
 * contract (renders `confirmBusyLabel` when provided, else `confirmLabel`).
 */
export function DialogFooter({
	onCancel,
	cancelLabel = "Cancel",
	onConfirm,
	confirmLabel,
	confirmBusyLabel,
	confirmDisabled,
	confirmColor = "primary",
	confirmVariant = "contained",
	confirmStartIcon,
	secondaryAction,
}: DialogFooterProps) {
	return (
		<div className="flex flex-row flex-wrap items-center justify-end gap-2">
			<Button variant="ghost" onClick={onCancel}>
				{cancelLabel}
			</Button>
			{secondaryAction ? (
				<div className="flex flex-row items-center gap-2">
					{secondaryAction}
				</div>
			) : null}
			<Button
				variant={resolveConfirmVariant(confirmColor, confirmVariant)}
				disabled={confirmDisabled}
				onClick={onConfirm}
			>
				{confirmStartIcon}
				{confirmBusyLabel ?? confirmLabel}
			</Button>
		</div>
	);
}