/**
 * Inspector — maps to [movie_engine_search_bar] attributes.
 */
import { PanelBody, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function SearchBarInspector({ attributes, setAttributes }) {
	const { placeholder, buttonText, customClass } = attributes;

	return (
		<>
			<PanelBody title={__('Search form', 'cine-movie-engine')} initialOpen={true}>
				<TextControl
					label={__('Placeholder', 'cine-movie-engine')}
					value={placeholder}
					onChange={(v) => setAttributes({ placeholder: v || '' })}
					placeholder={__('Search movies & TV series…', 'cine-movie-engine')}
					help={__(
						'Shown inside the search field when empty. Leave blank to use the plugin default.',
						'cine-movie-engine'
					)}
				/>
				<TextControl
					label={__('Button label', 'cine-movie-engine')}
					value={buttonText}
					onChange={(v) => setAttributes({ buttonText: v || '' })}
					placeholder={__('Search', 'cine-movie-engine')}
					help={__(
						'Text next to the search icon on the submit button. Leave blank for the default.',
						'cine-movie-engine'
					)}
				/>
			</PanelBody>

			<PanelBody title={__('Advanced', 'cine-movie-engine')} initialOpen={false}>
				<TextControl
					label={__('Extra CSS class', 'cine-movie-engine')}
					value={customClass}
					onChange={(v) => setAttributes({ customClass: v || '' })}
					help={__('Added to the search bar wrapper element.', 'cine-movie-engine')}
				/>
			</PanelBody>
		</>
	);
}
