import { InspectorControls } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { PanelBody, TextareaControl, ToggleControl } from "@wordpress/components";

const SidePanel = ({ attributes, setAttributes }) => {
	const { customArrowSvg, showImagesOnMobile } = attributes;

	return (
		<InspectorControls>
			<PanelBody title={__("Hover highlights settings", "orphic-ui")}>
				<TextareaControl
					label={__("Custom Arrow SVG", "orphic-ui")}
					help={__(
						"Enter custom SVG code. Use currentColor in fill/stroke to apply arrow color.",
						"orphic-ui",
					)}
					value={customArrowSvg}
					onChange={(value) => setAttributes({ customArrowSvg: value })}
				/>
				<ToggleControl
					label={__("Show images on mobile", "orphic-ui")}
					help={__(
						"If enabled, images will be displayed on mobile devices. If disabled, only text content will show on mobile.",
						"orphic-ui",
					)}
					checked={showImagesOnMobile}
					onChange={(value) => setAttributes({ showImagesOnMobile: value })}
				/>
			</PanelBody>
		</InspectorControls>
	);
};

export default SidePanel;
