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

export default function LiveSearchInspector({ attributes, setAttributes }) {
	const { placeholder, showIcon, customClass } = attributes;

	return (
		<>
			<PanelBody title={__('Live search', '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 when the field is empty. Leave blank to use the plugin default text.',
						'cine-movie-engine'
					)}
				/>
				<ToggleControl
					label={__('Show search icon', 'cine-movie-engine')}
					checked={showIcon !== false}
					onChange={(v) => setAttributes({ showIcon: v })}
				/>
			</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 live search wrapper element.', 'cine-movie-engine')}
				/>
			</PanelBody>
		</>
	);
}
