import PullToRefresh from 'react-pull-to-refresh'
import { ReactNode } from 'react'

/**
 * Invisible pull-to-refresh wrapper used on list pages.
 * The component stays visually transparent; when the user
 * drags down from the very top it calls the provided async
 * refresh callback and silently resolves.
 */
export const PullToRefreshWrapper = ({ onRefresh, children }: { onRefresh: () => Promise<void>; children: ReactNode }) => {
    return (
        <PullToRefresh
            onRefresh={onRefresh}
            pullingContent={null}
            refreshingContent={null}
            resistance={2} // a bit harder to trigger accidentally
        >
            {children}
        </PullToRefresh>
    )
}