import { __ } from '@wordpress/i18n'

/**
 * Floating "unsaved changes" bar. Renders only when `visible` is true and
 * sticks near the bottom of the content while scrolling.
 */
function SaveBar({ visible = false, saving = false, onSave = () => {} }) {
    if (!visible) return null

    return (
        <div className="strb-savebar" role="status">
            <span className="dot" />
            <span className="msg">{__('You have unsaved changes', 'shopbuild')}</span>
            <button
                type="button"
                className="strb-btn-fill"
                onClick={onSave}
                disabled={saving}
            >
                {saving ? __('Saving…', 'shopbuild') : __('Save changes', 'shopbuild')}
            </button>
        </div>
    )
}

export default SaveBar