import { Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
	Dialog,
	DialogContent,
	DialogHeader,
	DialogFooter,
	DialogTitle,
	DialogDescription,
} from '@/components/ui/dialog';

/**
 * Reusable confirmation modal for actions that need a second thought, e.g.
 * dismissing an intervention (which we won't surface again). Controlled via
 * `open` / `onOpenChange`.
 *
 * @param {object}   props
 * @param {boolean}  props.open
 * @param {(open:boolean)=>void} props.onOpenChange
 * @param {string}   props.title
 * @param {string}  [props.description]
 * @param {string}  [props.confirmLabel]
 * @param {string}  [props.cancelLabel]
 * @param {()=>void} props.onConfirm
 * @param {boolean} [props.pending]   Disables the buttons and spins the confirm one.
 */
const ConfirmDialog = ({
	open,
	onOpenChange,
	title,
	description,
	confirmLabel = 'Confirm',
	cancelLabel = 'Cancel',
	onConfirm,
	pending = false,
}) => (
	<Dialog open={open} onOpenChange={onOpenChange}>
		<DialogContent className="max-w-md">
			<DialogHeader>
				<DialogTitle>{title}</DialogTitle>
				{description && (
					<DialogDescription>{description}</DialogDescription>
				)}
			</DialogHeader>
			<DialogFooter className="gap-2">
				<Button
					variant="outline"
					onClick={() => onOpenChange(false)}
					disabled={pending}
				>
					{cancelLabel}
				</Button>
				<Button
					onClick={onConfirm}
					disabled={pending}
					className="bg-foreground text-background! hover:bg-foreground/90"
				>
					{pending && <Loader2 className="animate-spin" />}
					{confirmLabel}
				</Button>
			</DialogFooter>
		</DialogContent>
	</Dialog>
);

export default ConfirmDialog;