interface ConfirmDialogProps {
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  onConfirm: () => void;
  onCancel: () => void;
  destructive?: boolean;
}

export function ConfirmDialog({
  title,
  description,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  onConfirm,
  onCancel,
  destructive = false,
}: ConfirmDialogProps): JSX.Element {
  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirm-dialog-title"
      className="fixed inset-0 z-50 flex items-center justify-center"
    >
      <div className="modal-backdrop absolute inset-0" onClick={onCancel} aria-hidden="true" />
      <div className="relative card-product shadow-floating max-w-sm w-full mx-md flex flex-col gap-md">
        <h2 id="confirm-dialog-title" className="text-[20px] font-medium text-ink">
          {title}
        </h2>
        <p className="text-[16px] text-charcoal">{description}</p>
        <div className="flex items-center gap-md pt-xs">
          <button
            type="button"
            className={destructive ? 'btn-ink' : 'btn-primary'}
            onClick={onConfirm}
          >
            {confirmLabel}
          </button>
          <button type="button" className="btn-outline-ink" onClick={onCancel}>
            {cancelLabel}
          </button>
        </div>
      </div>
    </div>
  );
}