import { ToggleControl, PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import MobilePaddingPreset from '../components/MobilePaddingPreset';

export default function GeneralTab( { settings, updateField } ) {
	return (
		<>
			<PanelBody title={ __( 'Site features', 'wuppi' ) } initialOpen={ false }>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Back to top button', 'wuppi' ) }
					help={ __( 'Show a fixed button that scrolls to the top of the page.', 'wuppi' ) }
					checked={ !! settings.back_to_top }
					onChange={ ( v ) => updateField( 'back_to_top', v ? 1 : 0 ) }
				/>
				{ !! settings.back_to_top && (
					<ToggleControl
						__nextHasNoMarginBottom
						label={ __( 'Use button shape', 'wuppi' ) }
						help={ __( 'Apply the same border radius as the site buttons instead of a circle.', 'wuppi' ) }
						checked={ settings.back_to_top_shape === 'button' }
						onChange={ ( v ) => updateField( 'back_to_top_shape', v ? 'button' : 'circle' ) }
					/>
				) }
			</PanelBody>
			<PanelBody title={ __( 'Mobile content', 'wuppi' ) } initialOpen={ false }>
				<MobilePaddingPreset
					value={ Number( settings.mobile_content_padding ) }
					onChange={ ( v ) => updateField( 'mobile_content_padding', v ) }
				/>
			</PanelBody>
		</>
	);
}
