/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
// @ts-expect-error: Not typed yet.
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { __experimentalText as WCText } from '@wordpress/components';

/**
 * Internal dependencies
 */
import BackgroundPanel from './background-panel';
import { ScreenHeader } from './screen-header';
import { useSetting } from './hooks';
import { unlock } from './lock-unlock';

const { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );

function ScreenBackground() {
	const [ settings ] = useSetting( '' );
	const hasBackgroundPanel = useHasBackgroundPanel( settings );
	return (
		<>
			<ScreenHeader
				title={ __( 'Background' ) }
				description={
					<WCText>
						{ __( "Set styles for the site's background." ) }
					</WCText>
				}
			/>
			{ hasBackgroundPanel && <BackgroundPanel /> }
		</>
	);
}

export default ScreenBackground;