interface Props {
title: string;
message: string;
confirmLabel?: string;
cancelLabel?: string;
onConfirm: () => void;
onCancel: () => void;
destructive?: boolean;
}
export default function ConfirmDialog({
title,
message,
confirmLabel = 'Confirm',
cancelLabel = 'Cancel',
onConfirm,
onCancel,
destructive = false,
}: Props) {
return (
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
<div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
<h3 className="text-lg font-semibold mb-2">{title}</h3>
<p className="text-sm text-gray-600 mb-6">{message}</p>
<div className="flex justify-end gap-3">
<button
onClick={onCancel}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200"
>
{cancelLabel}
</button>
<button
onClick={onConfirm}
className={`px-4 py-2 text-sm font-medium text-white rounded-lg ${
destructive
? 'bg-red-600 hover:bg-red-700'
: 'bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)]'
}`}
>
{confirmLabel}
</button>
</div>
</div>
</div>
);
}